SVG 教程

 

SVG 意为可缩放矢量图形（Scalable Vector Graphics）。

SVG 使用 XML 格式定义图像。

什么是SVG？
1.指可伸缩矢量图形
2.定义网络的基于矢量图形
3.使用 XML 格式定义图形
4.图像在放大或改变尺寸的情况下其图形质量不会有所损失
5.是万维网联盟的标准
6.与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
 
SVG Shapes

SVG有一些预定义的形状元素，可被开发者使用和操作：

1.

  • 矩形 <rect>
  • 圆形 <circle>
  • 椭圆 <ellipse>
  • 线 <line>
  • 折线 <polyline>
  • 多边形 <polygon>
  • 路径 <path>

2.

  • x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）
  • y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px）
  • CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
  • CSS 的 stroke-opacity 属性定义轮廓颜色的透明度（合法的范围是：0 - 1）

3.

  • rx 和 ry 属性可使矩形产生圆角。ghkk