SVG基础总结

最近在工做中作一个h5相关的半圆进度组件需求，便开始学习了下svg。

SVG 是使用 XML 来描述二维图形和绘图程序的语言，SVG指可伸缩矢量图形 (Scalable Vector Graphics)

SVG基本属性

SVG的坐标系统

在介绍其它属性时，必须先介绍svg的坐标系统，和咱们高中学的坐标系有点不一样，也能够说是第一象限按x轴翻转获得svg的坐标系。y轴右方x为正值，x轴下方y为正值。

SVG 值的单位

在svg中默认的单位为px，能够写单位，也能够不写单位。

svg视窗大小大小

每次你建立了一个新的SVG元素，你也就建立了一个新的SVG视窗。视窗的大小等于你为SVG元素设置的宽度和高度。
svg在绝大多数浏览器中，默认大小为长300px，宽150px的大小，实际应用中推荐制定svg的width和height值。

<svg width="100" height="100">
</svg>

SVG 画布

画布是无限大的，意味着你能够在画布上画无限大的内容，可是，当你画的内容超过svg视窗大小的时候你是看不到的，但画布的内容是存在的，比如css中的overflow:hidden属性只是遮挡了可视区域的内容。

从一个简单的例子看下。

<svg>
  <circle cx="0" cy="0" r="50" fill="green" />
</svg>

咱们画了一个圆，可是在svg视窗里并未显示所有的圆，那是由于圆的中心默认是坐标系的（0，0）位置。
当咱们对svg设置overflow: visible;时便显示了完整的圆。

设置圆的中心，让其显示在svg视窗中

<circle cx="50" cy="50" r="50" fill="green" />

svg预约义的形状

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

SVG Stroke相关

SVG提供了一个范围普遍stroke 属性。

• stroke
• stroke-width
• stroke-linecap
• stroke-dasharray
• stroke-dashoffset

这些属性很经常使用，尤为是stroke-dasharray和stroke-dashoffset组合咱们能够实现不少生动的进度效果。

stroke 属性

Stroke属性定义一条线，文本或元素轮廓颜色：

stroke-width 属性

stroke- width属性定义了一条线，文本或元素轮廓厚度：

stroke-linecap 属性

strokelinecap属性定义不一样类型的开放路径的终结：

<svg>
  <g fill="none" stroke="black" stroke-width="6">
    <path stroke-linecap="butt" d="M5 20 l215 0" />
    <path stroke-linecap="round" d="M5 40 l215 0" />
    <path stroke-linecap="square" d="M5 60 l215 0" />
  </g>
</svg>

stroke-dasharray 属性

strokedasharray属性用于建立虚线。
stroke-dasharray为一个参数时： 实际上是表示虚线长度和每段虚线之间的间距
两个参数或者多个参数时：一个表示长度，一个表示间距

<svg>
  <g fill="none" stroke="black" stroke-width="4">
    <path stroke-dasharray="5,5" d="M5 20 l215 0" />
    <path stroke-dasharray="10,10" d="M5 40 l215 0" />
    <path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
  </g>
</svg>

stroke-dashoffset 属性

这个属性是相对于起始点的偏移，正数偏移x值的时候，至关于往左移动了x个长度单位，负数偏移x的时候，至关于往右移动了x个长度单位。

<svg>
        <line x1="0" y1="10" x2="100" y2="10" stroke="red" stroke-width="5" />
        <line
          x1="0"
          y1="10"
          x2="100"
          y2="10"
          class="line1"
          stroke-dasharray="70"
          stroke-dashoffset="0"
        />

</svg>