Question

任何人都可以帮我确定为什么我的文字没有在定义的路径中呈现#textPath03？路径呈现为假设，但当我将其放入<defs>并尝试使用它时，它不起作用。

    <svg version="1.1" height="700" width="700" viewBox="-5 -5 110 110" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" data-reactid="13">
  <defs data-reactid="14">
    <path id="#textPath03" d="M95,50 A45,45 0 0 0 50,5" data-reactid="15"></path>
  </defs>
  <line x1="50" y1="50" x2="100" y2="50" stroke="black" data-reactid="16"></line>
  <line x1="50" y1="50" x2="50" y2="0" stroke="black" data-reactid="17"></line>
  <path d="M90,50 A40,40 0 0 0 50,10" fill="none" stroke="green" data-reactid="18"></path>
  <use xlink:href="#textPath03" fill="none" stroke="red" data-reactid="19"></use>
  <text x="2" y="40%" font-size="20" data-reactid="20">
    <textPath xlink:href="#textPath03" data-reactid="21">Teste</textPath>
  </text>
</svg>

这是一个REACT渲染的SVG。

谢谢！

Answer 1

路径ID包含一个无关的＃字符。只有对路径的引用应具有该功能。删除它修复了你的例子......

＆＃13;

<svg version="1.1" height="700" width="700" viewBox="-5 -5 110 110" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" data-reactid="13">
  <defs data-reactid="14">
    <path id="textPath03" d="M95,50 A45,45 0 0 0 50,5" data-reactid="15"></path>
  </defs>
  <line x1="50" y1="50" x2="100" y2="50" stroke="black" data-reactid="16"></line>
  <line x1="50" y1="50" x2="50" y2="0" stroke="black" data-reactid="17"></line>
  <path d="M90,50 A40,40 0 0 0 50,10" fill="none" stroke="green" data-reactid="18"></path>
  <use xlink:href="#textPath03" fill="none" stroke="red" data-reactid="19"></use>
  <text x="2" y="40%" font-size="20" data-reactid="20">
    <textPath xlink:href="#textPath03" data-reactid="21">Teste</textPath>
  </text>
</svg>

＆＃13;

文本不会使用反应渲染的SVG中的路径渲染。如何正确使用此textPath？

1 个答案: