svg

来源：互联网发布：网络诚信制度编辑：程序博客网时间：2024/04/29 15:45

svg的一些形状：

矩形：

<rect x="20" y="20" width="250" height="250"style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9"/>

圆形：

<circle cx="100" cy="50" r="40" stroke="black"stroke-width="2" fill="red"/>

线条：

<line x1="0" y1="0" x2="300" y2="300"style="stroke:rgb(99,99,99);stroke-width:2"/>

多边形：

<polygon points="220,100 ,300,210 ,170,250"style="fill:#cccccc;stroke:#000000;stroke-width:1"/>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta name="keywords"content=""/><meta name="description" content="本篇网页的概述，一段话，对网站的进一步描述"/><meta name="author"  content="网页作者的资料"><meta name="robots" content="" /><meta http-equiv="Content－Type" content="text/html; charset=gb2312"><title>无标题文档</title><script>window.onload=function  () {var one=document.getElementById("one");var svg=one.getSVGDocument();//获取svg对象var svgdoc=svg.documentElement;var po=svgdoc.getElementsByTagName("polygon")[0];//获取svg中包含的polygon标签对象var angle=0; //po.style.strokeWidth=10;修改polygon标签中的样式属性 //alert(po.setAttribute("points","0,0,50,0,50,50"));获取points标签中的样式属性值 setInterval(function  () {angle+=0.1;var str=po.getAttribute("points");//获取points标签中的样式属性值var arr=str.split(",");var newstr="";for (var i=0; i<arr.length; i++) {var num=parseInt(arr[i]);//把字符串转为数值类型 num+=10*Math.random()*Math.sin(angle);//限制svg的显示范围，防止svg图片跑出显示区域 newstr+=num+",";}newstr=newstr.substr(0,newstr.length-1);//去掉最后拼接上的逗号po.setAttribute("points",newstr);//重新设置points标签中的样式属性值 },50)}</script></head><body><embed src="svg.svg" width="600" height="600" type="image/svg+xml"pluginspage="http://www.adobe.com/svg/viewer/install/" id="one"/><!--引入svg图片--><!--<object data="rect.svg" width="300" height="100" type="image/svg+xml"codebase="http://www.adobe.com/svg/viewer/install/" /><iframe src="svg.svg" width="300" height="100"></iframe><svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"><polygon points="220,100 ,300,210 ,170,250"style="fill:#cccccc;stroke:#000000;stroke-width:5"/><!--画svg图片--></svg>--></body></html>

0 0