SVG 入门基础（1）属性-阿里云开发者社区

1. 简介

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

SVG 是使用 XML 来描述二维图形和绘图程序的语言。

SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失。

SVG 是万维网联盟的标准。

SVG 参考文档

特点

（1）SVG 图像可通过文本编辑器来创建和修改；

（2）SVG 图像可被搜索、索引、脚本化或压缩；

（3）SVG 是可伸缩的；

（4）SVG 图像可在任何的分辨率下被高质量地打印；

（5）SVG 可在图像质量不下降的情况下被放大；

1.1 使用方式

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

<!DOCTYPE html>
<html>
<head></head>
<body>
<svg
  id="mysvg"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 800 600"
  preserveAspectRatio="xMidYMid meet"
>
  <circle id="mycircle" cx="400" cy="300" r="50" />
<svg>
</body>
</html>

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

1.2 坐标轴系统

SVG使用的坐标系统或者说网格系统：以页面的左上角为(0,0)坐标点，坐标以像素为单位，x 轴正方向是向右，y 轴正方向是向下。

注意：这和你小时候所教的绘图方式是相反的。但是在HTML文档中，元素都是用这种方式定位的。

1.3 颜色

RGB: 红色、绿色、蓝色，每个分量的取值范围[0, 255]，优点是显示器更容易解析。

HSL: 颜色h、饱和度s%、亮度l%，每个分量的取值范围分别是[0, 359], [0, 100%], [0, 100%],，其中，h=0表示红色， h=0表示120绿色，h=0表示240 蓝色。

2. 作用于 svg 标签的属性

2.1 viewport：

表示 svg 的可见区域的大小：width height，控制 svg 的宽度和高度；

2.2 viewBox：

定义用户视野的位置以及大小，即定义用来观察SVG视图一个矩形区域，

更形象的解释就是：SVG就像是我们的显示器屏幕，viewBox就是截屏工具选中的那个框框，最终的呈现就是把框框中的截屏内容再次在显示器中全屏显示；

eg: viewBox =‘20 20 100 100’，前两个参数表示 viewBox 视野相对 svg 视图的 x y 坐标，后两个参数表示 viewBox 的大小;

与svg实际大小的关系如下：

如下图所示，用户可以看到的部分是蓝色的星星，而星星的另一侧是看不到的

viewBox 的使用案例：

第一步：绘制矩形

<svg width="200" height="200" style="border: 2px solid #58a">
  <rect x="30" y="30" width="100" height="100" fill="#fb3" stroke="none"></rect>
</svg>

第二步：增加视野 viewBox viewBox=‘0 0 100 100’，相当于用户只能看到 SVG 视图中 viewBox 定义的区域，即下图红色框内区域：viewBox=“x, y, width, height” // x:左上角横坐标，y:左上角纵坐标，width:宽度，height:高度

<svg width="200" height="200" style="border: 2px solid #58a" viewBox='0 0 100 100'>
  <rect x="30" y="30" width="100" height="100" fill="#fb3" stroke="none"></rect>
</svg>

最终效果图：

2.3 preserveAspectRatio

这个属性也是作用于 < svg > 元素上，且作用对象都是 viewBox；

属性值为空格分隔的两个值组合而成。

eg:

preserveAspectRatio="xMidYMid meet"

第一个值表示：viewBox 如何 viewPort 对齐；

第一个值又分为两个部分组成：前半部分表示 x 方向的对齐，后半部分表示 y 方向对齐。

xMaxYMax表示右-下

xMidYMid表示中-中

第二个值表示：如何维持高宽比（可以为空）;

图1：红色区域为不设置 preserveaspectRatio 时的可视区域；

图2: 采用与x轴左边对齐、与y轴上边缘对齐的方式，保持纵横比缩放；

图3：保持纵横比的同时，以比例小的方向即 x 轴等比放大，填充 svg 区域;

图4：preserveaspectRatio=“none”，变形充分适应svg;

3. 作用于 svg 内部元素的属性

svg 支持 css 选择器给元素添加样式

/* 定义样式 */
.rectStyle {
  fill: yellow;
}
<svg width="200" height="200">
  <rect class="rectStyle" width="20" height="20"></rect>
</svg>

直接在元素中设置样式

<svg width="200" height="200">
  <rect width="20" height="20" fill="yellow"></rect>
</svg>

写成style

<svg width="200" height="200">
  <rect style="fill: yellow;" width="20" height="20"></rect>
</svg>

3.1 填充

fill：定义填充颜色和文字颜色；
fill-opacity：定义填充颜色的透明度；
fill-rule：指定填充规则，符合填充规则才可被填充；
    有效值: nonzero | evenodd | inherit
    默认值: nonzero
    应用于: shape 形状类元素 和 文字内容类元素
    可继承:  是
    比例:   无
    媒体:   可见
    动画可用:  是

nonzero

字面意思是非零。按照规则，要判断一个点是否在图形内，从该点作任意方向的一条射线，然后检测射线与图形路径的交点情况。从0开始计数，路径从左向右穿过射线则计数加1，从右向左穿过射线则计数减1。得出计数结果后，如果结果是0，则认为点在图形外部，否则认为在内部。

下图演示了 nonzero 规则:

evenodd

字面意思是“奇偶”。按该规则，要判断一个点是否在图形内，从该点作任意方向的一条射线，然后检测射线与图形路径的交点的数量。如果结果是奇数则认为点在内部，是偶数则认为点在外部。

下图演示了evenodd 规则:

3.2 边框

stroke：边框颜色；
stroke-width：边框宽度；
stroke-opacity：边框透明，取值[0,1]；
stroke-linecap：单条线端点样式，一般应用于直线或者路径，取值：[ butt | square | round ]，分别是对接、方形和圆形

stroke-dasharray：虚线边框，可以设置每段虚线的长度和间隔，之间使用逗号分隔或者空格分隔，
如：stroke-dasharray="10, 5, 5, 10"

stroke-dashoffset：设置虚线描边偏移量，使图案向前移动

 <svg width="200" height="200" viewBox='0 0 300 300'>
    <line x1="20" y1="20" x2="120" y2="20"
        stroke="red" stroke-width="5" stroke-linecap="butt"
        stroke-dasharray="20 5 5 10">
    </line>
    <line x1="20" y1="60" x2="120" y2="60"
        stroke="red" stroke-width="5" stroke-linecap="butt"
        stroke-dasharray="20 5 5 10" stroke-dashoffset="10">
    </line>
 </svg>

虚线的样式为 20 5 5 10，偏移量为10，根据下图可发现第二个虚线，整体向前移动了10个单位

sroke-linejoin：两条线段之间衔接点的样式，取值：[ miter | round | bevel ]

分别是尖角(图左一)、圆角(图左二) 和斜角(图左三)

sroke-miterlimit：默认值4，
  当 miterLength / stroke-width < stroke-miterlimit 时，stroke-linejoin 值会变成换成 bevel 斜角

如下图中，stroke-width 为15，根据计算公式，miterLength ／ stroke-width 约等于5.2，即当 stroke-miterlimit 小于6时，stroke-linejoin 值会变成 bevel 斜角。

3.3 透明度

opacity：定义整个图形的透明度

3.4 字体

font-size：字体大小；
font-family：字体系列的名称；
font-weight：字体粗细；
font-style：字体样式，斜体和正常；
text-decoration：下划线样式；
text-anchor：设置文本的排列属性，属性值 [start | middle | end | inherit]；
  如：middle表示，将文字定位原点移动至文字中心。

3.5 变换

transform：同 css，默认是左上角为旋转中心，如：transform="rotate(30)"；
transform-origin：同css，设置旋转的操作中心；
rotate：设置文字元素的旋转角度，正值为顺时针旋转，

注意区分 rotate 和 transform 中的 rotate，如 rotate=“30”，而 transform 中的 rotate 是对整个元素进行旋转操作。

<svg width="200" height="200">
   <text x="10" y="10" dx="10" dy="10" textLength="100" rotate="20"> 示例文字1 </text>
</svg>
<svg width="200" height="200">
   <text x="10" y="10" dx="10" dy="10" textLength="100" transform="rotate(20)"> 示例文字2 </text>
</svg>