乐趣区

关于svg:SVG基础总结

jiezi

最近在工作中做一个 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>

退出移动版