SVG-概述/容器与通用属性

参考：

SVG 图像入门教程

MDN SVG

SVG教程

SVG入门-踏得

工具：

svg在线编辑

概述

SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。其他图像格式都是基于像素处理的，SVG 则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。

SVG 文件可以直接插入网页，成为 DOM 的一部分，然后用 JavaScript 和 CSS 进行操作。如：

<svg width="150" height="100" viewBox="0 0 3 2">

    <rect width="1" height="2" x="0" fill="#008d46" />

    <rect width="1" height="2" x="1" fill="#ffffff" />

    <rect width="1" height="2" x="2" fill="#d2232c" />

</svg>

See the Pen svg-example-1 by flqbestboy
(@fanlinqiang) on CodePen.

SVG 代码也可以写在一个独立文件中，然后用<img>、<object>、<embed>、<iframe>等标签插入网页。

<img src="circle.svg">

<object id="object" data="circle.svg" type="image/svg+xml"></object>

<embed id="embed" src="icon.svg" type="image/svg+xml">

<iframe id="iframe" src="icon.svg"></iframe>

CSS 也可以使用 SVG 文件。

.logo {

  background: url(icon.svg);

}

SVG 文件还可以转为 BASE64 编码，然后作为 Data URI 写入网页。

<img src="data:image/svg+xml;base64,[data]">

容器`svg`

标签`<svg>`

SVG 代码以 <svg> 元素开始，包括开启标签 <svg> 和关闭标签 </svg>, 这是根元素。

属性	含义
`width`	宽度，默认值为`300px`, 可使用百分比或像素(单位`px`)
`height`	高度，默认值为`150px`, 可使用百分比或像素(单位`px`)
`version`	可定义所使用的 `SVG` 版本
`xmlns`	可定义 `SVG` 命名空间
`viewBox`	可定义视口位置，属性的值有四个数字，分别是左上角的横坐标和纵坐标、视口的宽度和高度

例：

<svg width="100" height="100" viewBox="50 50 50 50">

  <circle id="mycircle" cx="50" cy="50" r="50" />

</svg>

See the Pen svg-example-2 by flqbestboy
(@fanlinqiang) on CodePen.

上面代码中，SVG 图像是100像素宽 x 100像素高，viewBox属性指定视口从(50, 50)这个点开始。所以，实际看到的是右下角的四分之一圆。

注意，视口必须适配所在的空间。上面代码中，视口的大小是 50 x 50，由于 SVG 图像的大小是 100 x 100，所以视口会放大去适配 SVG 图像的大小，即放大了四倍。

如果不指定width属性和height属性，只指定viewBox属性，则相当于只给定 SVG 图像的长宽比。这时，SVG 图像的默认大小将等于所在的 HTML 元素的大小。

SVG嵌在SVG内部

比之HTML，SVG允许你无缝嵌入别的svg元素。因此你可以利用内部svg元素的属性viewBox、属性width和属性height简单创建一个新的坐标系统。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

  <svg width="100" height="100" viewBox="0 0 50 50">

    <rect width="50" height="50" />

  </svg>

</svg>

See the Pen svg-example-3 by flqbestboy
(@fanlinqiang) on CodePen.

矩形将是指定的两倍大。

元素通用属性

SVG 的 CSS 属性与网页元素有所不同。

`fill`

填充色

`fill-opacity`

填充色透明度（合法的范围是：0 - 1）

`stroke`

描边色

`stroke-width`

描边色宽

`stroke-linecap`

表示描边端点表现方式。可用值有：butt, round, square, inherit.

`stroke-linejoin`

表示描边转角的表现方式。可用值有：miter, round, bevel, inherit.

`stroke-opacity`

笔触颜色的透明度（合法的范围是：0 - 1）

`stroke-miterlimit`

表示描边相交（锐角）的表现方式。默认大小是4. 什么斜角转斜面的角度损耗之类的意思，值越大，损耗越小。

`stroke-dasharray`

控制用来描边的点划线的图案范式,它是一个<length>和<percentage>数列，数与数之间用逗号或者空白隔开，指定短划线和缺口的长度。如果提供了奇数个值，则这个值的数列重复一次，从而变成偶数个值。因此，5,3,2等同于5,3,2,5,3,2。

`stroke-dashoffset`

表示虚线的起始偏移。可选值为：<percentage>, <length>, inherit. 百分比值，长度值，继承。

`opacity`

定义整个元素的透明值（合法的范围是：0 - 1）