HTML in SVG textPath?

huangapple
go评论105阅读模式
英文:

HTML in SVG textPath?

问题

在我的React应用程序中，我试图获取包含HTML span（如下所示：“Made with ❤️ since 2023”）的文本，以便在SVG文本路径中显示（该文本路径本身遵循一个圆形路径）。

我已尝试使用foreignObject包装此HTML，如下所示：

  1. <svg className="svg" viewBox="0 0 100 100">
  2.  <path
  3.   id="circle"
  4.   d="M 50,50 m -40,0 a 40,40 0 1,0 80,0 a 40,40 0 1,0 -80,0"
  5.   fill="transparent"
  6.    />
  7.   <text width="100px" height="100px">
  8.   <textPath id="text" className="textPath" href="#circle">
  9.    <foreignObject
  10.     x="0"
  11.     y="0"
  12.     width="100"
  13.     height="100"
  14.     id="text"
  15.     className="textPath"
  16.     href="#circle"
  17.     xmlns="http://www.w3.org/1999/xhtml"
  18.     dangerouslySetInnerHTML={{
  19.      __html: `<p>Made with <span role="img" aria-label="love">❤️</span> since 2023</p>`,
  20.      }}
  21.     />
  22.    </textPath>
  23.   </text>
  24. </svg>

尽管我可以看到HTML字符串在DOM中正常呈现，但它似乎无法显示，因为<text>和<textPath>似乎都没有宽度或高度。我是否遗漏了什么，或者根本无法在textPath中使用foreignObject？非常感谢任何其他解决方案！

英文:

In my React app, I'm trying to get some text, containing html spans (like so: "Made with <span role="img" aria-label="love">❤️</span> since 2023" to display in an SVG text path (which itself follows a circle path).

I have tried wrapping this html using foreignObject, like so:

  1. &lt;svg className=&quot;svg&quot; viewBox=&quot;0 0 100 100&quot;&gt;
  2.  &lt;path
  3.   id=&quot;circle&quot;
  4.   d=&quot;M 50,50 m -40,0 a 40,40 0 1,0 80,0 a 40,40 0 1,0 -80,0&quot;
  5.   fill=&quot;transparent&quot;
  6.    /&gt;
  7.   &lt;text width=&quot;100px&quot; height=&quot;100px&quot;&gt;
  8.   &lt;textPath id=&quot;text&quot; className=&quot;textPath&quot; href=&quot;#circle&quot;&gt;
  9.    &lt;foreignObject
  10.     x=&quot;0&quot;
  11.     y=&quot;0&quot;
  12.     width=&quot;100&quot;
  13.     height=&quot;100&quot;
  14.     id=&quot;text&quot;
  15.     className=&quot;textPath&quot;
  16.     href=&quot;#circle&quot;
  17.     xmlns=&quot;http://www.w3.org/1999/xhtml&quot;
  18.     dangerouslySetInnerHTML={{
  19.      __html: `&lt;p&gt;Made with &lt;span role=&quot;img&quot; aria-label=&quot;love&quot;&gt;❤️&lt;/span&gt; since 2023&lt;/p&gt;`,
  20.      }}
  21.     /&gt;
  22.    &lt;/textPath&gt;
  23.   &lt;/text&gt;
  24. &lt;/svg&gt;

and, although I can see the html string is rendered just fine in the DOM. It is nowhere to be seen, as it seems that both &lt;text&gt;and &lt;textPath&gt;have no width or height. Am I missing something or is it simply not possible to use foreignObject in a textPath? Any other solutions much appreciated!

答案1

得分: 1

为在SVG路径中显示文本，您可以使用SVG tspan 元素而不是 foreignObject。类似于这样的内容：

  1. <svg className="svg" viewBox="0 0 100 100">
  2.   <path
  3.     id="circle"
  4.     d="M 50,50 m -40,0 a 40,40 0 1,0 80,0 a 40,40 0 1,0 -80,0" 
  5.     fill="transparent"
  6.   />
  7.   <text>
  8.     <textPath id="text" className="textPath" href="#circle">
  9.       <tspan x="0" dy="1em">Made with</tspan>
  10.       <tspan x="0" dy="1em">❤️ since 2023</tspan>
  11.     </textPath>
  12.   </text>
  13. </svg>

用于微调的 tspan 属性在此处有描述。

英文:

To display text in an SVG path, you can use the SVG tspan element instead of foreignObject. Smth like this:

  1. &lt;svg className=&quot;svg&quot; viewBox=&quot;0 0 100 100&quot;&gt;
  2.   &lt;path
  3.     id=&quot;circle&quot;
  4.     d=&quot;M 50,50 m -40,0 a 40,40 0 1,0 80,0 a 40,40 0 1,0 -80,0&quot; 
  5.     fill=&quot;transparent&quot;
  6.   /&gt;
  7.   &lt;text&gt;
  8.     &lt;textPath id=&quot;text&quot; className=&quot;textPath&quot; href=&quot;#circle&quot;&gt;
  9.       &lt;tspan x=&quot;0&quot; dy=&quot;1em&quot;&gt;Made with&lt;/tspan&gt;
  10.       &lt;tspan x=&quot;0&quot; dy=&quot;1em&quot;&gt;❤️ since 2023&lt;/tspan&gt;
  11.     &lt;/textPath&gt;
  12.   &lt;/text&gt;
  13. &lt;/svg&gt;

Attributes of tspan for fine-tuning are described here.

huangapple
  • 本文由 发表于 2023年3月7日 19:45:35
  • 转载请务必保留本文链接：https://go.coder-hub.com/75661570.html
  • dangerouslysetinnerhtml
  • foreignobject
  • html
  • reactjs
  • svg
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定