Svg初学总结

原来使用js插件来画图highchart.js,发现还是用svg实现的，打算学习了解一下，以下都是可直接在html插入。支持浏览器：Internet Explorer9，火狐，谷歌Chrome，Opera和Safari

什么是SVG？

1. SVG 指可伸缩矢量图形 (Scalable Vector Graphics)

2. SVG 用来定义用于网络的基于矢量的图形

3. SVG 使用 XML 格式定义图形

4. SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失

5. SVG 是万维网联盟的标准

6. SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

实例操作：

矩形源码

代码解析:

rect 元素的 width 和 height 属性可定义矩形的高度和宽度
style 属性用来定义 CSS 属性
CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
CSS 的 stroke-width 属性定义矩形边框的宽度
CSS 的 stroke 属性定义矩形边框的颜色
x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）
y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px）
CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
CSS 的 stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1）
CSS opacity 属性用于定义了元素的透明值 (范围: 0 到 1)。
rx 和 ry 属性可使矩形产生圆角。

效果图：

**代码解析：**cx和cy属性定义圆点的x和y坐标。如果省略cx和cy，圆的中心会被设置为(0, 0)r属性定义圆的半径效果图：![超级产品经理](https://v1cdn.imspm.com/imspm.com超级产品经理2016070402dpbasnien0p.png)    

代码解析：
CX属性定义的椭圆中心的x坐标
CY属性定义的椭圆中心的y坐标
RX属性定义的水平半径
RY属性定义的垂直半径

效果图

**代码解析：**x1 属性在 x 轴定义线条的开始y1 属性在 y 轴定义线条的开始x2 属性在 x 轴定义线条的结束y2 属性在 y 轴定义线条的结束效果图![超级产品经理](https://v1cdn.imspm.com/imspm.com超级产品经理201607040251woywgt4wp.png)  

代码解析：
points 属性定义多边形每个角的 x 和 y 坐标
fill-rule：nonzero/evenodd

效果图

总结

这些只是简单的了实现了基本图形的构建，SVG是使用XML文档描述来绘图。从这点来看：SVG更适合用来做动态交互，而且SVG绘图很容易编辑，只需要增加或移除相应的元素就可以了。同时SVG是基于矢量的，所以它能够很好的处理图形大小的改变

关键字：html, svg

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！