SVG：沿曲線路徑追加形狀

我目前處於需要附加文本以跟隨SVG中的曲線路徑的情況。我們的目標是允許用戶動態輸入將沿着彎曲路徑顯示的文本。通常情況下，我會使用textPath method，但是掛起是 - 根據我們的設計者指定的文本渲染 - 我們需要將文本轉換爲路徑（可能使用類似Opentype的東西）。我不希望追加到textPath的形狀會起作用（它沒有），但我不知道要從這裏走到哪裏去達到同樣的目的。SVG：沿曲線路徑追加形狀

<svg viewBox="0 0 1000 300" 
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> 

<use xlink:href="#MyPath" fill="none" stroke="red" /> 

<text font-family="Verdana" font-size="42.5"> 
<textPath xlink:href="#MyPath"> 
    <rect class="sq-1" height="50" width="50" x="0" y="0"/> 
    <rect class="sq-2" height="50" width="50" x="100" y="0"/> 
    <rect class="sq-3" height="50" width="50" x="200" y="0"/> 
</textPath> 
</text> 

<rect x="1" y="1" width="998" height="298" fill="none" stroke="black" stroke-width="2" /> 
</svg>

Here is a fiddle對於上面的例子。

來源

2017-07-07 jl0w

https://www.w3.org/2013/10/SVG_in_OpenType/ –

在瀏覽器中沒有辦法做到這一點 - 至少不是建立在任何方面。在我看來，你的選擇是：

希望有一個JavaScript庫，在那裏，可以一個<textPath>轉換爲<path>。我不知道任何。 JS無法訪問字體幾何或指標。該庫將不得不解析字體本身。
找到或編寫JavaScript庫，在那裏，可以分發<path>元素沿<path>
有一個後處理腳本，貫穿Inkscape中，插畫等方面的SVG做轉換到路徑的步驟在服務器上。

來源

2017-07-07 17:12:00

SVG：沿曲線路徑追加形狀

回答

相關問題