做爰高潮a片〈毛片〉,尤物av天堂一区二区在线观看,一本久久A久久精品VR综合,添女人荫蒂全部过程av

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關(guān)鍵字專題1關(guān)鍵字專題50關(guān)鍵字專題500關(guān)鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關(guān)鍵字專題關(guān)鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當(dāng)前位置: 首頁 - 科技 - 知識(shí)百科 - 正文

JS中使用textPath實(shí)現(xiàn)線條上的文字

來源:懂視網(wǎng) 責(zé)編:小采 時(shí)間:2020-11-27 22:23:06
文檔

JS中使用textPath實(shí)現(xiàn)線條上的文字

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

近期在項(xiàng)目中要實(shí)現(xiàn)關(guān)系圖,需要在線條上繪制文字。要實(shí)現(xiàn)這個(gè)功能,我們需要在SVG中連接的線條從標(biāo)簽line修改為path,這樣才可能實(shí)現(xiàn)類似如下的效果:

 

1個(gè)簡單的例子如下所示:

<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>

在這里我們需要實(shí)現(xiàn)1個(gè)path,然后設(shè)置其ID屬性,之后我們創(chuàng)建textPath標(biāo)簽,并鏈接到上述的ID屬性,這樣就可以實(shí)現(xiàn)在路徑上關(guān)聯(lián)文字了。

而在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; 
 })

實(shí)際上這段代碼就是上述例子的實(shí)現(xiàn),這樣就可以避免編寫繁瑣的SVG代碼了。

總結(jié)

以上所述是小編給大家介紹的使用textPath實(shí)現(xiàn)線條上的文字,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!

聲明:本網(wǎng)頁內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

JS中使用textPath實(shí)現(xiàn)線條上的文字

JS中使用textPath實(shí)現(xiàn)線條上的文字:近期在項(xiàng)目中要實(shí)現(xiàn)關(guān)系圖,需要在線條上繪制文字。要實(shí)現(xiàn)這個(gè)功能,我們需要在SVG中連接的線條從標(biāo)簽line修改為path,這樣才可能實(shí)現(xiàn)類似如下的效果: 1個(gè)簡單的例子如下所示: <svg viewBox=0 0 1000 300 xmlns=http://www.w3
推薦度:
標(biāo)簽: 文字 js 線上
  • 熱門焦點(diǎn)

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 贵德县| 利津县| 毕节市| 康定县| 彰化县| 沂水县| 汉沽区| 宁明县| 屯昌县| 霍州市| 营山县| 连山| 永顺县| 洛宁县| 辽阳县| 黔江区| 福清市| 扬中市| 苏尼特右旗| 政和县| 社旗县| 年辖:市辖区| 大名县| 德州市| 灵山县| 定远县| 北票市| 桃源县| 保山市| 许昌县| 乌兰察布市| 洪雅县| 金平| 那曲县| 鄢陵县| 宜章县| 白银市| 东兴市| 阿坝县| 安陆市| 延庆县|