day03
文章目录
一:SVG(可伸缩矢量图形)
特点:
- 用于网络的矢量图形(高质量的被打印)
- 使用xml格式定义的图形(可以使用文本编辑器来创建和修改)
- 放大或者极度缩小的情况下图形不会失真
- SVG 图像中的文本是可选的,同时也是可搜索的(很适合制作地图)
二:兼容性
IE8及以下的浏览器不支持,使用插件(Adobe SVG)可以在IE8运行
三:svg和canvas的区别
-
—svg是通过xml语言进行描述的
—canvas是通过js脚本语言进行绘制的
-
—svg图形可以进行动态的修改
—canvas图形一经绘制,不能改动,否则只有重新绘制
-
—svg不依赖电脑的分辨率
—canvas依赖分辨率
-
—svg的每一个元素都可以使用dom事件进行处理,
—canvas不支持事件处理
四:svg文件在html的使用方式
-
embed,iframe标签
—优点:允许脚本使用
—缺点:H4和XHTMl中不能使用(H5可以)
<embed src="circle1.svg" type="image/svg+xml" /> <iframe src="circle1.svg"></iframe>
-
object标签
—优点:H4,H5和XHTMl都可以使用
—缺点:不允许脚本使用
<object data="circle1.svg" type="image/svg+xml"></object>
-
使用a标签进行连接
<a href="circle1.svg">View SVG file</a>
五:svg的使用
1·绘制圆
- circle标签创建一个圆
- stroke:表示绘制边框颜色
- stroke-width:表示边框宽度
-
fill:表示填充 颜色
- cx,cy表示圆中心的坐标(行内)
- r:表示圆的半径
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500px" height="500px">
<!--xmlns:是svg的命名空间
version表示:使用的svg的版本
width,height表示:整个svg的绘制区域 (默认300*150)
-->
<circle cx="200" cy="200" r="100" stroke="blue" stroke-width="5" fill="yellow" />
</svg>
2· 绘制矩形
-
rect标签创建矩形
-
width,height:定义矩形的高宽
-
x: 定义矩形距离浏览器左侧的距离(行内)
-
y: 定义矩形距离浏览器上侧的距离(行内)
-
rx 和 ry 属性可使矩形产生圆角。(行内)
#square {
stroke: black;
stroke-width: 4px;
fill: aqua;
fill-opacity:0.3;
}
<svg xmlns="http://www.w3.org/2000/svg"
version="1.1"
class="all">
<!--opacity属性定义整个图形的透明度
fill-opacity属性定义填充透明度
stroke-opacity 属性定义轮廓透明度(合法的范围是:0 - 1)-->
<rect id="square" x="20px" y="20px" rx="30px" ry="50px"/>
</svg>
3·绘制椭圆
- rx:定义水平半径
- ry:定义垂直半径
<svg style="width: 600px; height:600px">
<ellipse class="tuo" cx="300" cy="80" rx="90" ry="50" />
</svg>
4·绘制直线
- x1:开始的x坐标
- x2:结束绘制的y坐标
- y1:开始的y坐标
- y2:结束的y坐标
<svg>
<line x1="50" y1="100" x2="200" y2="50"/>
</svg>
5·绘制多边形
- polygon 标签是用来绘制多边形的
- 多边形是有直线构成的,封闭的图形
- points:写明每一个点之间的坐标(x,y)
<svg>
<polygon points="100,200,500,200,200,300,300,100,400,300" fill-rule=”evenodd“/>
</svg>
-
fill-rule:svg图形的填充规则(判断某一区域是否属于内部【内部被填充】)
—nonzero(从该点做任意方向的射线,路径从左—>右穿过射线,加一;从右—>左穿过射线,减一;结果为0,该点在外部,反之,)
l-rule=”evenodd“/>
- fill-rule:svg图形的填充规则(判断某一区域是否属于内部【内部被填充】)
—nonzero(从该点做任意方向的射线,路径从左—>右穿过射线,加一;从右—>左穿过射线,减一;结果为0,该点在外部,反之,)
—evenodd(射线与路径的相交点,奇数在内部,填充)