SVG文字沿指定路徑運動

2021-10-08 21:15:15 字數 1766 閱讀 6981

一、引用svg

二、獲取節點

htmlobj = document.getelementbyid("roomshere");


svgdoc = htmlobj.getsvgdocument();


svgroot = svgdoc.documentelement;
三、新增路徑四、建立外部節點 方便刪除

var g = document.createelementns('', 'g');


g.setattribute("id", id + "error");


g.setattribute("role", "areaerror");
五、建立text和textpath 新增xlink:href時的命名空間非常重要 必須有  xlink:href繫結路徑id

var text = document.createelementns('', 'text');


var textpath = document.createelementns('', 'textpath');


textpath.textcontent = msg;


textpath.setattributens('',"xlink:href", "#" + id);


textpath.setattribute("id", id + "textpath");


textpath.setattribute("font-size","80px");
六、建立animate xlink:href同上  xlink:href繫結textpath的id

var animate = document.createelementns('', 'animate');


animate.setattribute("attributename", "startoffset");


animate.setattributens('',"xlink:href","#"+id + "textpath");


animate.setattribute("from", "0");


animate.setattribute("to", "100%");


animate.setattribute("begin", "0s");


animate.setattribute("dur", "10s");


animate.setattribute("repeatcount", "indefinite");


animate.setattribute("keytimes","0;1");


animate.setattribute("calcmode", "spline");


animate.setattribute("keysplines", "0.1 0.2 .22 1");
七、將text和animate繫結到g中 並新增到頁面完整**

效果圖

文字會沿著三角形的三邊迴圈運動 

Unity實現控制（帶剛體元件）物體沿指定方向移動

一 通用的控制帶剛體元件物體沿指定方向移動的方法 title 三維視覺化 專案 主題 帶剛體元件物體的移動 description 功能 date 2019 version 0.1版本 author coffee modify recoder using system.collections usi...

SVG實戰開發學習（三） 路徑

三種基本的繪圖指令 1 移動到當前點 moveto 和繪製直線 lineto 解析 指令 實際繪製動作 m269 112 抬筆移動到座標 269,112 l217 163 繪製直線到座標 217,163 l272 163 繪製直線到座標 272,163 m257 149 抬筆移動到座標 257,14...

Cesium 載入3D飛機模型沿指定路線前進

話不多說，先上效果 主要用到 czml 相關知識 czml 是一種用來描述動態場景的json架構的語言，主要用於 cesium 在瀏覽器中的展示。它可以用來描述點 線 佈告板 模型以及其他的圖元，同時定義他們是怎樣隨時間變化的。詳情可看 czml介紹 我這裡就不過多贅述了。var czml outl...