テキストパスがレンダリングされないのはなぜですか？

Question

私は本当に、これらの2つのテキストがラインとパスに沿って表示されない理由を困惑させました。誰かが私を指摘できますか？

<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>

Answer 1

あなただけ<line>または<path>要素内部<text>がレンダリングされるべきではなく、それらを引き起こしていた配置<path>

に<textPath>を行うことができます。ここ

私の最高の推測では、あなたが達成しようとしているものであり、私はこれは

<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>

を役に立てば幸い