JS中使用textPath實現線條上的文字

來源：懂視網責編：小采時間：2020-11-27 22:23:06

JS中使用textPath實現線條上的文字

JS中使用textPath實現線條上的文字:近期在項目中要實現關系圖,需要在線條上繪制文字。要實現這個功能,我們需要在SVG中連接的線條從標簽line修改為path,這樣才可能實現類似如下的效果: 1個簡單的例子如下所示: <svg viewBox=0 0 1000 300 xmlns=http://www.w3

推薦度：

點擊下載本文 文檔為doc格式

導讀JS中使用textPath實現線條上的文字:近期在項目中要實現關系圖,需要在線條上繪制文字。要實現這個功能,我們需要在SVG中連接的線條從標簽line修改為path,這樣才可能實現類似如下的效果: 1個簡單的例子如下所示: <svg viewBox=0 0 1000 300 xmlns=http://www.w3

近期在項目中要實現關系圖,需要在線條上繪制文字。要實現這個功能,我們需要在SVG中連接的線條從標簽line修改為path,這樣才可能實現類似如下的效果:

1個簡單的例子如下所示:

<svg viewBox="0 0 1000 300" 
 xmlns="http://www.w3.org/2000/svg" 
 xmlns:xlink="http://www.w3.org/1999/xlink"> 
 <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" fill="none" stroke="red"/> 
 <text font-family="Verdana" font-size="42.5"> 
 <textPath xlink:href="#MyPath" rel="external nofollow" > 
 We go up, then we go down, then up again 
 </textPath> 
 </text> 
</svg>

在這里我們需要實現1個path,然后設置其ID屬性,之后我們創建textPath標簽,并鏈接到上述的ID屬性,這樣就可以實現在路徑上關聯文字了。

而在D3中我們可以這樣操作:

var link = svg.append("g").selectAll(".edgepath") 
 .data(graph.links) 
 .enter() 
 .append("path") 
 .style("stroke-width",0.5) 
 .style("fill","none") 
 .attr("marker-end",function(d){ 
 return "url(#"+d.source+")"; 
 }) 
 .style("stroke","black") 
 .attr("id", function(d,i){ 
 return "edgepath"+i; 
 }); 
var edges_text = svg.append("g").selectAll(".edgelabel") 
 .data(graph.nodes) 
 .enter() 
 .append("text") 
 .attr("class","edgelabel") 
 .attr("id", function(d,i){ 
 return "edgepath"+i; 
 }) 
 .attr("dx",80) 
 .attr("dy",0); 
edges_text.append("textPath") 
 .attr("xlink:href", function(d,i){ 
 return "#edgepath"+i; 
 }).text(function(d){ 
 return d.id; 
 })

實際上這段代碼就是上述例子的實現,這樣就可以避免編寫繁瑣的SVG代碼了。

總結

以上所述是小編給大家介紹的使用textPath實現線條上的文字，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com