SVG文字沿指定路径运动

最新推荐文章于 2024-10-23 21:30:00 发布

昵称全重复

最新推荐文章于 2024-10-23 21:30:00 发布

阅读量1.1k

点赞数

分类专栏： JS html5 Demo

本文链接：https://blog.youkuaiyun.com/liuzishang/article/details/107814079

版权

一、引用SVG

<iframe id="RoomsHere" src="/svg/20200101010101_Default.svg" width="100%" height="100%"></iframe>

二、获取节点

 htmlObj = document.getElementById("RoomsHere");
    SVGDoc = htmlObj.getSVGDocument();
    SVGRoot = SVGDoc.documentElement;

三、添加路径

  $(SVGRoot).append('<path xmlns="http://www.w3.org/2000/svg" id="a4a41048-b2d6-ea11-a5b1-70c94ee2d3df" num="1" fill="red" d="M13960.987166912855 15306.460402129294 L13330.603498471777 16807.180232159993 L15559.314790766688 16689.237481290373 Z" style="opacity:0.4" title="11111" role="area" stroke="blue" stroke-width="2" errorcolor="#E21918" elementType="2" KJ2016AreaNum="" KJ2016AreaName="" PLSAreaNum="" PLSAreName=""><animate attributeName="opacity" values="0.6;0" dur="1s" begin="0s" repeatCount="indefinite"/></path>');

四、创建外部节点方便删除