svg

最新推荐文章于 2024-11-15 13:22:53 发布

不是我的货

最新推荐文章于 2024-11-15 13:22:53 发布

阅读量457

点赞数

分类专栏： html5 文章标签： html5

本文链接：https://blog.csdn.net/wym1581/article/details/50610202

版权

html5 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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.οnlοad=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>