2017-03-17 52 views
0

我真的很困惑,为什么这两个文字不沿线和路径显示。有人能指出我吗?为什么文本路径不被渲染?

<svg width="300px" height="300px"> 
 
    <line id="ok" x1="10" y1="20" x2="100" y2="100" stroke="red" stroke-width=10> 
 
     <text> 
 
     <textPath stroke="black" xlink:href="#ok">OHHHHSUHDIAU</textPath> 
 
     </text> 
 
    </line> 
 
    <path id="io" d="M10,10 L100,10" stroke="blue" stroke-width=10> 
 
     <text> 
 
     <textPath stroke="black" xlink:href="#io">io</textPath> 
 
     </text> 
 
    </path> 
 
    </svg>

回答

0

你只能做一个<path>

一个<textPath>放置<line><path>元素中的<text>是使他们不被渲染。

这里是我最好的猜测在你试图完成什么,我希望这有助于

<svg width="300px" height="300px"> 
 
    <defs> 
 
    <path id="io" d="M10,10 L100,10" /> 
 
    <path id="ok" d="M10,20 L100,100" /> 
 
    </defs> 
 
    <use xlink:href="#io" stroke-width="10" stroke="blue" /> 
 
    <use xlink:href="#ok" stroke-width="10" stroke="red" /> 
 
    <text> 
 
    <textPath stroke="black" xlink:href="#io">io</textPath> 
 
    <textPath stroke="black" xlink:href="#ok">OHHHHSUHDIAU</textPath> 
 
    </text> 
 
</svg>