SVG：如何在我的SVG中放置我的文本路徑？

請考慮following fiddle。（在Firefox中打開它）如何將我的文本路徑放置在SVG中，以便它不會被隱藏？SVG：如何在我的SVG中放置我的文本路徑？

我嘗試將x和y屬性添加到svg標記和text標記，但文本不會移動。

<svg width="597" height="98" style="overflow:visible; "> 
<defs> 
    <path d=" M 0,0 L 596,0 M 0,96 L 596,96 " id="_x0000_i1042tp" /> 
</defs> 
<text x="10" y="40" style="font-size:48px; font-family:&quot;Times New Roman&quot;; fill:#369; " method="stretch"> 
    <textPath xlink:href="#_x0000_i1042tp" xmlns:xlink="http://www.w3.org/1999/xlink">WortArt Test3</textPath> 
</text>

而且上面的小提琴不會顯示在瀏覽器（或任何其它基於WebKit的瀏覽器）什麼，這個問題是基於WebKit瀏覽器隱藏四溢SVG。我該如何解決這個問題？

Thanx提前!!

來源

2014-03-31 Surender Thakran

爲什麼負面的標記和接近的投票？這是一個有關html/svg的問題... –

不知道爲什麼neg標記，但也許它值得在代碼中顯示代碼。 – Ian

@好吧我會如果這有幫助，但我添加了一個小提琴，以便每個人不僅可以看到我的SVG，但也看到它產生的結果.. –

您需要掌握基線和對齊屬性。下面似乎得到它的兩條線裏面，而不是沿第二線的頂部：

<textPath dominant-baseline="hanging" xlink:href="#mypath">WortArt Test3</textPath>

以下是完整的小提琴，這在Chrome的工作：

http://fiddle.jshell.net/Qcaa8/1/

來源

2014-03-31 12:18:53 Anthony

優秀的優秀.......但你爲什麼使用'viewBox'？ –

因爲它被打破，否則不知道爲什麼，可能是由於在jsfiddle框架。 – Anthony

變化0,0 L 596,0到0,X L 596,X其中X是文本的底部的位置。（所以如果你想讓它位於圖像的頂部，你應該使用（aprox）文本的字體大小）。

來源

2014-03-31 11:51:50 Quentin

我不認爲我可以繼續改變路徑本身，因爲它是編程式生成的，我不想混淆我的代碼。我們不能通過添加一些位置屬性來重新定位我的文本嗎？ –

你可以使用< text>元素上的dy可以向下移動文本，也可以調整路徑以便描述您真正想要的文本基線。請參閱fiddle。

overflow:visible在Chrome中沒有任何效果，這是提交爲bug 231577。請注意，webkit/Safari也有same bug。

來源

2014-03-31 13:40:24

SVG：如何在我的SVG中放置我的文本路徑？

回答

相關問題