CSS字体旋转模糊

Question

我一直在对svg中的悬停进行旋转类型的测试，但是无论我正在尝试什么（例如在此页面https://www.blackpepper.co.uk/blog/blurry-css-animations-in-chrome-try-this上，一旦发生旋转，它都会变得越来越模糊。

您可以在这里看到它：

html,
body {
  height: 100%;
}
.wrappertitle {
  margin: 0 auto;
  height: 100%;
  overflow: hidden;
  transform: rotate(-45deg);
  position: relative;
}

.svgtitle {
  animation: rotate 20s linear 0s infinite normal;
  -webkit-animation: rotate 20s linear 0s infinite normal;
  -moz-animation: rotate 20s linear 0s infinite normal;
  -ms-animation: rotate 20s linear 0s infinite normal;
  -o-animation: rotate 20s linear 0s infinite normal;
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -ms-animation-play-state: paused;
  -o-animation-play-state: paused;
  -webkit-font-smoothing: antialised;
  font-smoothing: antialised;
  -webkit-transform-origin: 50% 51%;
  -webkit-font-smoothing: subpixel-antialiased;

  cursor: pointer;
  width: 12vw;
  height: 12vw;
  position: absolute;
  top: calc(50% - 6vw);
  left: calc(50% - 6vw);
  overflow: hidden;

  &:after {
    display: block;
    content: "hello";
  }
}

.circle-texttitle {
  font: 114px/114px times;
  letter-spacing: 0px;
  width: 100%;
  fill: black;
}

.svgtitle:hover {
  animation-play-state: running;
}

@keyframes rotate {
  /*transform: rotate(360deg);*/
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>



<div class="wrappertitle">
  <svg class="svgtitle" xmlns="http://www.w3.org/2000/svg" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="10cm" height="10cm" viewBox="0 0 1000 1000" preserveAspectRatio="xMinYMin">
    <defs>
      <path id="textPath" d="M 250 500 A 250,250 0 1 1 250 500.0001" />
    </defs>
    <text class="circle-texttitle" x="0" y="0" text-anchor="middle">
      <textPath xlink:href="#textPath" startOffset="50%">cosmétiques &bull; éthiques &bull; vegetal &bull; </textPath>
    </text>
  </svg>
</div>

你有什么想法吗？我找不到任何解决方案。

谢谢，

Answer 1

尝试一下Blurry text on transform:rotate in Chrome。也许会对您有帮助。我还在搜索。