Question

在缩放浏览器窗口时，我在将文本保留在圆形路径上时遇到问题。使用Safari浏览器，文本在圆形路径上需要更多或更少的空间，使其重叠或创建我不想要的额外空间。我希望它总是看起来一样，同一个地方的文字使用相同的空间。以下是我的代码和the demo。如果可以，请帮忙。

<svg version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    x="0px" y="0px" width="15vw" height="15vw"
    viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
    <defs>
        <path id="criclePath"  d=" M 150, 150 m -120, 0 a 120,120 0 0,1 240,0 a 120,120 0 0,1 -240,0 "/>
    </defs>
    <circle cx="150" cy="150" r="100" fill="none" stroke="#000"/>

    <text x="150" y="150" dy="-1.7em"
      fill="#000" font-size="25" text-anchor="middle" 
      letter-spacing="-0.03em">no prior</text>
    <text x="150" y="150" dy="-0.6em" 
      fill="#000" font-size="25" text-anchor="middle"
      letter-spacing="-0.03em">knowledge is</text>
    <text x="150" y="150" dy="0.6em"
      fill="#000" font-size="25" text-anchor="middle"
      letter-spacing="-0.03em">required for</text>
    <text x="150" y="150" dy="1.7em" 
      fill="#000" font-size="25" text-anchor="middle" 
      letter-spacing="-0.03em">beginners</text>

    <g>
        <use xlink:f="#criclePath" fill="none"/>
      <text fill="#000" font-size="2.3em" font-weight="900" text-align="justify" letter-spacing="0.2">
         <textPath xlink:href="#criclePath">EDUCATION&#160;•&#160;INSPIRATION&#160;•&#160;VACATION&#160;•&#160;X</textPath>
        </text>
    </g>
</svg>

在Safari中控制/稳定圆形路径上的文本

0 个答案: