js控制svg文件|javascript+SVG

⑴ 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元素的文本值

<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-31j"><title>Insert title here</title><script type="text/javascript"> function load() { var embedTag = document.createElement('embed'); embedTag.type = "image/svg+xml"; embedTag.width = "640"; embedTag.height = "480"; embedTag.onload = function() { alert(embedTag.getSVGDocument()); }; embedTag.src = "test.svg"; document.body.appendChild(embedTag); }</script></head><body onload="load();"></body></html>

⑶ javascript+SVG

createHistogram=function(document){varNewSVGElement=function(Q,A)//生成SVG元素{varF;Q='string'===typeofQ?document.createElementNS('http'+'://www.w3.org/2000/svg',Q):Qfor(FinA)F.indexOf('xlink:')?Q.setAttribute(F,A[F])://不是xlink命名空间的属性Q.setAttributeNS('http'+'://www.w3.org/1999/xlink',F.substr(6),A[F])//是xlink命名空间的属性returnQ},Group={},T=['ABCD','EFGH','IJKL','MNOP','QRSTU','VWXYZ'],F;for(F=T.length;F–;)//向Group中初始化bins的数据for(;T[F];T[F]=T[F].substr(1))Group[T[F].charAt(0)]=Freturnfunction(SVG,Q){varCount=Array(6),//存放bins计数G,//<g>Max=0,//存放最高矩形高度用於确定SVG绘图高度F;//临时变量|计数器变量Q=Q.toUpperCase().split('')//转化成大写後单字分隔for(;Q.length;Q.shift())//bins计数,确定最高高度{F=Group[Q[0]]Count[F]=(Count[F]||0)+1Max<Count[F]&&(Max=Count[F])}50*Max>SVG.getAttribute('height')&&SVG.setAttribute('height',50*Max)SVG.appendChild(G=NewSVGElement('g',{transform:'translate(0'+SVG.getAttribute('height')+')scale(1-1)',//通过坐标变换将绘制设置为原点在左下角,向右为x增,向上为y增style:'fill:blue;stroke:black'//默认填充样式}))for(F=0;F<Count.length;++F)G.appendChild(NewSVGElement('rect',{width:50,height:50*Count[F]||1,x:50*F,y:0}))returnSVG}}(document)

直接测试代码

varTestSVG=document.createElementNS('http'+'://www.w3.org/2000/svg','svg')TestSVG.setAttribute('width',300)TestSVG.setAttribute('height',400)document.getElementsByTagName('body')[0].appendChild(TestSVG)createHistogram(TestSVG,'ABCDEFGHIJKLMNOPQRSTUVWXYZ'),''

Bai编辑器简直愚蠢, 啥字符串都想搞成超链接

有Bug说啊..

懒得严格测试

⑷ 如何通过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;


赞 (0)