Text SVG文本路径问题
我正在处理SVG元素,并在路径上添加了一个textpath。就像在这个链接上一样 但我需要在两行上添加文本,就像用“br”分隔一样 有人知道怎么做吗, 致以最诚挚的问候,在em单位中使用dy:Text SVG文本路径问题,text,svg,Text,Svg,我正在处理SVG元素,并在路径上添加了一个textpath。就像在这个链接上一样 但我需要在两行上添加文本,就像用“br”分隔一样 有人知道怎么做吗, 致以最诚挚的问候,在em单位中使用dy: <svg width="100%" height="100%" viewBox="0 0 1000 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg width="100%" height="100%" viewBox="0 0 1000 300"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="MyPath"
d="M 100 200
C 200 100 300 0 400 100
C 500 200 600 300 700 200
C 800 100 900 100 900 100" />
</defs>
<use xlink:href="#MyPath" fill="none" stroke="red" />
<text font-family="Verdana" font-size="42.5" dy="-1em">
<textPath xlink:href="#MyPath">
We go up, then we go down, then up again
</textPath>
</text>
<text dy="0em" font-family="Verdana" font-size="42.5">
<textPath xlink:href="#MyPath">
SecondLine
</textPath>
</text>
<!-- Show outline of the viewport using 'rect' element -->
<rect x="1" y="1" width="998" height="298"
fill="none" stroke="black" stroke-width="2" />
</svg>
我们上升,然后下降,然后再上升
二线
到目前为止,您尝试了什么?Ps,如果你下次提供一个英文URL,而不是fr,那就太好了。我可能不明白你到底想要什么,但看起来你想创建两个单独的路径和两个文本路径,对吗?我认为不可能沿多个路径分发textPath
,尤其是当您想要在特定字符上中断时,这需要逻辑,而不是标记。如果我错了,请纠正我。@MatthijsvanHest对于FR中的链接很抱歉,我添加了一个img,以便您可以看到我需要做什么。@MatthijsvanHest有一个问题的答案,谢谢您的帮助:)我看到了。:)正如我所说的:它需要有两个独立的文本路径;)你不能用
或者别的什么来打破它,谢谢我。哈哈:这正是我需要做的!非常感谢。