SVG基础总结

2020年08月16日

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

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

SVG基本属性

SVG的坐标系统

在介绍其它属性时,必须先介绍svg的坐标系统,和我们高中学的坐标系有点不同,也可以说是第一象限按x轴翻转得到svg的坐标系。y轴右方x为正值,x轴下方y为正值。 wpid-svg-coordinate-system.png

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>

20200816213711.jpg

我们画了一个圆,但是在svg视窗里并未显示全部的圆,那是因为圆的中心默认是坐标系的(0,0)位置。
当我们对svg设置overflow: visible;时便显示了完整的圆。

20200816214138.jpg

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

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

20200816222212.jpg

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属性定义一条线,文本或元素轮廓颜色:

20200816223706.jpg

stroke-width 属性

stroke- width属性定义了一条线,文本或元素轮廓厚度: 20200816223801.jpg

stroke-linecap 属性

strokelinecap属性定义不同类型的开放路径的终结: 20200816223951.jpg

<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为一个参数时: 其实是表示虚线长度和每段虚线之间的间距
两个参数或者多个参数时:一个表示长度,一个表示间距 20200816224043.jpg

<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>

20200816225326.jpg

0 条评论
文章目录
  • SVG基本属性
    • SVG的坐标系统
      • SVG 值的单位
        • svg视窗大小大小
          • SVG 画布
          • svg预定义的形状
            • SVG Stroke相关
              • stroke 属性
                • stroke-width 属性
                  • stroke-linecap 属性
                    • stroke-dasharray 属性
                      • stroke-dashoffset 属性