导航:首页 > 编程语言 > js读取svg

js读取svg

发布时间:2025-06-15 04:59:46

㈠ 如何通过js获取HTML中iframe中的SVG整个文档

先找到iframe对象,再通过iframe的contentDocument属性获取SVG整个文档对象

<iframesrc="svg/02.svg"frameborder="0"width="500"height="300"id="f1"></iframe>
varobj=document.getElementById("f1");
vard=obj.contentDocument;

㈡ 如何用 JS 获取 SVG 内 path 元素中的图形的实际位置及尺寸

用 JS 获取 SVG 内 path 元素中的图形的实际位置及尺寸的方法:
1、使用内getElementById获取容svg节点对象:
var el = document.getElementById("yourElement");
2、调用getBoundingClientRect获取path的边界矩形的位置:
var rect = el.getBoundingClientRect();
3、分别获取width和height属性就得到实际位置了。

console.log( rect.width );
console.log( rect.height);

㈢ svg无法加载外部js

<svgwidth="580"height="399.9999999"
xmlns="http://www.w3.org/2000/svg"version="1.2"baseProfile="tiny"
xmlns:ev="http://www.w3.org/2001/xml-events">
<scripttype="application/ecmascript"xlink:href="demo.js"/>

demo.js

//demo.js删除<script></script>

我自己写了一个

文件:a.svg

<svgwidth="100%"height="100%"viewBox="00100100"version="1.2"baseProfile="full"
xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/2000/xlink"xmlns:ev="http://www.w3.org/2001/xml-events">
<scripttype="application/ecmascript"href="s.es"/>
<circlecx="50"cy="50"r="45"fill="green"onclick="change(evt)"/>
</svg>

文件:s.es

functionchange(evt){
if(evt.target.getAttribute('fill')==='green'){
evt.target.setAttribute('fill','red')
}else{
evt.target.setAttribute('fill','green')
}
}

㈣ JS正则截取指定svg文本

varstr='<g><path></path></g><gclass="className"><path></path></g><gclass="className"><path></path></g><g><path></path></g>';
varreg=/<g[^>]*class[="'s]+className["']?[^>]*>(?:(?!</g>)[sS])*</g>/gi;
str.match(reg);

阅读全文

与js读取svg相关的资料

热点内容
苹果手机怎么还原所有设置 浏览:521
cad修复zw文件 浏览:150
附件存储在数据库中 浏览:71
dsp原理与应用教程思考题 浏览:632
cad新建和保存文件 浏览:449
编程怎么打出上标乘号 浏览:109
在网站上卖书需要什么 浏览:518
酷狗app清理缓存文件在哪 浏览:360
尿检中哪个数据能判断肾结石 浏览:692
平板怎么保存网页视频文件 浏览:667
只狼应该创建哪些文件夹来 浏览:543
为了保证中断服务程序 浏览:416
编程猫赛车得分怎么统计 浏览:38
excel每次打开一个文件都弹出窗口 浏览:615
无人区被禁版本 浏览:739
掌中云是什么网站 浏览:590
电信电视超级密码 浏览:567
苹果虚拟骑行系统 浏览:334
ps4浏览器有几个版本 浏览:404
智能储存器编程器怎么使用 浏览:561

友情链接