SVGパスにテキストを追加できますか？

Question

svgパスにテキストを追加することは可能ですか？私はsvg三角形を作成しましたが、これが可能であれば文字を中心に追加したいと思いますか？

Answer 1

はい。 textPath要素の使用方法については、section 10.13 of the SVG1.1 specification（「パス上のテキスト」を参照）を参照してください。要約

：

1. は、あなたのパスにid属性を与えます。
2. <textPath xlink:href="#pathid">My text here</textPath>

を作成します。ここではストレート仕様からの例です：
http://www.w3.org/TR/SVG/images/text/toap01.svg

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg width="12cm" height="3.6cm" viewBox="0 0 1000 300" version="1.1" 
    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> 
    <desc>Example toap01 - simple text on a path</desc> 

    <use xlink:href="#MyPath" fill="none" stroke="red" /> 
    <text font-family="Verdana" font-size="42.5" fill="blue" > 
    <textPath xlink:href="#MyPath"> 
     We go up, then we go down, then up again 
    </textPath> 
    </text> 

</svg>