SVG-動態創建textpath的路徑嗎？

Question

我想在SVG中沿路徑（半圓）彎曲文本。 我遵循了這個教程，這很棒： https ： //css-tricks.com/snippets/svg/curved-text-along-path/

問題在於，此處顯示的路徑僅適用於此特定文本- Dangerous Curves Ahead 。 如果僅留下發生這種情況的Dangerous詞： https : //codepen.io/anon/pen/pqqVGa-它不再起作用（文本不再均勻地分布在路徑上）。

無論文本長度如何，我都希望它能正常工作。 如何實現呢？

Answer 1

這是假定初始文本大小（35）太小。

 let curveLength = curve.getTotalLength(); let fs = 35;//the initial font size test.setAttributeNS(null, "style", `font-size:${fs}px`) while(test.getComputedTextLength() < curveLength){ fs++ test.setAttributeNS(null, "style", `font-size:${fs}px`) } 

 body { background-color: #333; } text { fill: #FF9800; } 

 <svg viewBox="0 0 500 500"> <path id="curve" d="M73.2,148.6c4-6.1,65.5-96.8,178.6-95.6c111.3,1.2,170.8,90.3,175.1,97" /> <text id="test"> <textPath xlink:href="#curve"> Dangerous </textPath> </text> </svg> 

更新

OP在評論：

感謝您的回復。 我寧願創建一個更長/更小且與文本寬度匹配的新路徑，而不是調整字體大小。 不知道如何做到這一點。 –費雷

請閱讀代碼中的注釋。 根據文本的長度，我正在計算新路徑，但是我假設了很多事情：我假設新路徑在與舊路徑相同的位置開始。

 let textLength = test.getComputedTextLength(); // the center of the black circle let c = {x:250,y:266} // radius of the black circle let r = 211; // the black arc starts at point p1 let p1 = {x:73.2,y:150} // the black arc ends at point p2 let p2 = {x:426.8,y:150} // distance between p1 and p2 let d = dist(p1, p2); // the angle of the are begining at p1 and ending at p2 let angle = Math.asin(.5*d/r); // the radius of the new circle let newR = textLength / angle; // the distance between p1 and the new p2 let newD = 2 * Math.sin(angle/2) * newR; // the new attribute c for the path #curve let D = `M${p1.x},${p1.y} A` D += `${newR}, ${newR} 0 0 1 ${p1.x + newD},${p1.y} ` document.querySelector("#curve").setAttributeNS(null,"d",D); // a function to calculate the distance between two points function dist(p1, p2) { let dx = p2.x - p1.x; let dy = p2.y - p1.y; return Math.sqrt(dx * dx + dy * dy); } 

 body { background-color: #333; } text { fill: #FF9800; }; 

 <svg viewBox="0 0 500 500"> <path id="black_circle" d="M73.2,148.6c4-6.1,65.5-96.8,178.6-95.6c111.3,1.2,170.8,90.3,175.1,97" /> <path id ="curve" d="M73.2,150 A 211,211 0 0 1 426.8,150" fill="#777" /> <text id="test"> <textPath xlink:href="#curve"> Dangerous curves </textPath> </text> </svg> 

Answer 2

使用lengthAdjust和textLength屬性，您可以調整文本的長度和字母的高度，從而將所需長度的文本放在固定長度的線段上

 <svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="300" viewBox="0 0 500 300"> <path id="path1" fill="none" stroke="black" d="M30,151 Q215,21 443,152 " /> <text id="txt1" lengthAdjust="spacingAndGlyphs" textLength="400" font-size="24"> <textPath id="result" method="align" spacing="auto" startOffset="1%" xlink:href="#path1"> <tspan dy="-10"> very long text very long text very long text </tspan> </textPath> </text> </svg> 

使用屬性startOffset =" 10% "您可以調整短語第一個字符的位置

 <svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="300" viewBox="0 0 500 300" > <path id="path1" fill="none" stroke="black" d="M30,151 Q215,21 443,152 " /> <text id="txt1" lengthAdjust="spacingAndGlyphs" textLength="400" font-size="24"> <textPath id="result" method="align" spacing="auto" startOffset="15%" xlink:href="#path1"> <tspan dy="-10"> very long text very long text very long text </tspan> </textPath> </text> </svg> 

並使用此屬性制作動畫（ 單擊畫布 ）

 <svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="300" viewBox="0 0 500 300"> <path id="path1" fill="none" stroke="black" d="M30,151 Q215,21 443,152 " /> <text id="txt1" lengthAdjust="spacingAndGlyphs" textLength="200" font-size="24"> <textPath id="result" method="align" spacing="auto" startOffset="-100%" xlink:href="#path1"> <tspan dy="-10"> Very long text Very long text Very long text </tspan> <animate begin="svg1.click" dur="15s" attributeName="startOffset" values="-100%;1%;1%;100%;1%;1%;-100%" repeatCount="5"/> </textPath> </text> <text x="200" y="150" font-size="24" fill="orange" >Click me </text> </svg>