可以將文本添加到SVG路徑嗎？

是否可以向svg路徑添加文本，我已經創建了一個svg三角形並且希望將一個字母添加到該中心但不確定這是否可能？可以將文本添加到SVG路徑嗎？

2011-08-09 styler

這是絕對有可能。我不得不承認，我不知道該怎麼做，但我使用raphael js，並始終使用/定位文本。看看這個圖書館，它可能會幫助你。 – agmcleod

是的。有關使用textPath元素的信息，請參閱section 10.13 of the SVG1.1 specification（標題爲「路徑上的文本」）。

總結：

給您的路徑中的id屬性。
創建<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>

來源

2011-08-10 03:09:15 Phrogz

可以將文本添加到SVG路徑嗎？

回答

相關問題