UI资源-SVG篇-静态基础内容

GAVIN潇潇

杭州/设计爱好者/5年前/590浏览

版权

UI资源-SVG篇-静态基础内容

GAVIN潇潇

由浅入深，记录并分享SVG学习。实现动效资源输出，保证项目效果

一. 简介

可缩放矢量图形(Scalable Vector Graphics，简称SVG)是一种使用XML来描述二维图形的语言(SVG严格遵从XML语法)。 SVG允许三种类型的图形对象：矢量图形形状（例如由直线和曲线组成的路径）、图像和文本。可以将图形对象（包括文本）分组、样式化、转换和组合到以前呈现的对象中。 SVG 功能集包括嵌套转换、剪切路径、alpha 蒙板和模板对象。

SVG绘图是交互式和动态的。例如，可使用脚本来定义和触发动画。这一点与Flash相比很强大。Flash是二进制文件，动态创建和修改都比较困难。而SVG是文本文件，动态操作是相当容易的。而且，SVG直接提供了完成动画的相关元素，操作起来非常方便。

二. SVG优势

SVG与其它的图片格式相比，有很多优点(很多优点来源于矢量图的优点)：

SVG文件是纯粹的XML，可被非常多的工具读取和修改(比如记事本)。
与JPEG 和GIF图像比起来，尺寸更小，且可压缩性更强。
SVG 是可伸缩的，可在图像质量不下降的情况下被放大，可在任何的分辨率下被高质量地打印。
图像中的文本是可选的，同时也是可搜索的(很适合制作地图)。

独立SVG文件

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

</svg>

三. 基础图形介绍

对于设计同学来说，图形并不需要我们通过代码一点点绘制，包括AI，Sketch，Figma等工具，可以轻松帮我们完成图形绘制。但需要我们了解代码，有助于为我们后续完成动效资源等作铺垫

1. 矩形 - rect元素

这个元素有6个控制位置和形状的属性，分别是：

x：矩形左上角的坐标(用户坐标系)的x值。
y：矩形左上角的坐标(用户坐标系)的y值。
width：矩形宽度。
height：矩形高度。
rx：实现圆角效果时，圆角沿x轴的半径。
ry：实现圆角效果时，圆角沿y轴的半径。
比如上面例子中，实现了圆角效果，你也可以通过设置rx,ry为不同的值实现椭圆角效果。

2. 圆 - circle元素

这个元素的属性很简单，主要是定义圆心和半径：

r：圆的半径。
cx：圆心坐标x值。
cy：圆心坐标y值。

3. 椭圆 - ellipse元素

这个是更加通用的圆形元素，你可以分别控制半长轴和半短轴的长度，来实现不同的椭圆，很容易想到，当两个半轴相等时，就是正圆形了。
rx：半长轴(x半径)。
ry：半短轴(y半径)。
cx：圆心坐标x值。
cy：圆心坐标y值。

4. 直线 - line元素

直线需要定义起点与终点即可：

x1：起点x坐标。
y1：起点y坐标。
x2：终点x坐标。
y2：终点y坐标。

5. 折线 - polyline元素

折线主要是要定义每条线段的端点即可，所以只需要一个点的集合作为参数：

points：一系列的用空格，逗号，换行符等分隔开的点。每个点必须有2个数字：x值和y值。所以下面3个点 (0,0), (1,1)和(2,2)可以写成："0 0, 1 1, 2 2"。

6. 多边形 - polygon元素

这个元素就是比polyline元素多做一步，把最后一个点和第一个点连起来，形成闭合图形。参数是一样的。
points：一系列的用空格，逗号，换行符等分隔开的点。每个点必须有2个数字：x值和y值。所以下面3个点 (0,0), (1,1)和(2,2)可以写成："0 0, 1 1, 2 2"。

7. 路径 - path元素

这个是最通用，最强力的元素了；使用这个元素你可以实现任何其他的图形，不仅包括上面这些基本形状，也可以实现像贝塞尔曲线那样的复杂形状；此外，使用path可以实现平滑的过渡线段，虽然也可以使用polyline来实现这种效果，但是需要提供的点很多，而且放大了效果也不好。这个元素控制位置和形状的只有一个参数：
d：一系列绘制指令和绘制参数(点)组合成。

8. 图形绘制（包括圆弧，贝塞尔曲线）

这块是SVG中比较复杂的，这里我只给参数，有兴趣了解的同学，可以自行研究

https://aotu.io/notes/2016/11/22/SVG_Web_Animation/index.html

9. 文本

<svg>

上面的例子中所示，text元素可以设置下列的属性：

x,y是文本位置坐标。
text-anchor是文本显示的方向，其实也就是位置(x,y)处于文本的位置。这个属性有start,middle和end三种值。
start表示文本位置坐标(x,y)位于文本的开始处，文本从这点开始向右挨个显示。
middle表示(x,y)位于文本中间处，文本向左右两个方向显示，其实就是居中显示。
end表示(x,y)点位于文本结尾，文本向左挨个显示。

　　除了这些属性，下面的这些属性都既可以在CSS中指定，也可以直接在属性中指定:

fill,stroke：填充和描边颜色，具体使用在后面总结。
font的相关属性：font-family, font-style, font-weight, font-variant, font-stretch, font-size, font-size-adjust, kerning, letter-spacing, word-spacing and text-decoration。

9.1 文本区间 - tspan元素

它只能出现在text元素或者tspan元素的子元素中

<text>
<tspan font-weight="bold" fill="red">This is bold and red</tspan>
</text>

tspan元素有下列的属性可以设置：

x,y用于设置包含的文本的绝对坐标值，这个值会覆盖默认的文本位置。这些属性可以包含一系列数字，这些数字会应用到每个对应的单个字符。没有对应设置的字符会紧跟前一个字符。

dx,dy用于设置包含的文本相对于默认的文本位置的偏移量。这些属性同样可以包含一系列数字，每个都会应用到对应的字符。没有对应设置的字符会紧跟前一个字符。你可以把上面的例子中的x换成dx看看效果。
rotate用于设置字体的旋转角度。这个属性页可以包含一系列数字，应用到每个字符。没有对应设置的字符会使用最后设置的那个数字。

textLength：这是最令人费解的属性，据说设置完以后，渲染发现文本的长度与这个值不一致时，会以这个长度为准。但是我没有试出来效果。

9.2 文本引用 - tref元素

这个元素允许引用定义过的文本，并高效的拷贝到当前位置，通常配合xlink:href指定目的元素。因为是拷贝过来的，所以使用css修改当前文本的时候，不会修改原来的文本。

9.3 文本路径 - textPath元素

这个比较有意思，效果也很酷，能做出很多的艺术效果；这个元素从它的xlink:href属性获取指定的路径并把文本对齐到这个路径上

10. SVG中渲染图片 - image元素

SVG中的image元素可以直接支持显示位图

<svg width="5cm" height="4cm">
<image xlink:href="Penguins.jpg" x="0" y="0" height="50px" width="50px"/>
</svg>

11. 填充和描边

11.1 填充色 - fill属性
这个属性使用设置的颜色填充图形内部，使用很简单，直接把颜色值赋给这个属性就可以了。看例子：

<rect x="10" y="10" width="100" height="100" stroke="blue" fill="red"
fill-opacity="0.5" stroke-opacity="0.8"/>

如果不提供fill属性，则默认会使用黑色填充,如果要取消填充，需要设置成none。
可以设置填充的透明度，就是fill-opacity，值的范围是0到1。
稍微复杂一点的是fill-rule属性：

nonzero：从需要判定的点向任意方向发射线，然后计算图形与线段交点的处的走向；计算结果从0开始，每有一个交点处的线段是从左到右(顺时针)的，就加1；每有一个交点处的线段是从右到左(逆时针)的，就减1；这样计算完所有交点后，如果这个计算的结果不等于0，则该点在图形内，需要填充；如果该值等于0，则在图形外，不需要填充。
evenodd：这个值采用的算法是：从需要判定的点向任意方向发射线，然后计算图形与线段交点的个数，个数为奇数则该点在图形内，需要填充；个数为偶数则点在图形外，不需要填充。

11.2 描边 - stroke属性

如果不提供stroke属性，则默认不绘制图形边框。
可以设置边的透明度，就是stroke-opacity，值的范围是0到1。
端点 - stroke-linecap属性：

属性可以使用butt,square,round三个值

<svg width="160" height="140">

  <line x1="40" x2="120" y1="20" y2="20" stroke="black" stroke-width="20" stroke-linecap="butt"/>
  <line x1="40" x2="120" y1="60" y2="60" stroke="black" stroke-width="20" stroke-linecap="square"/>
  <line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round"/>
</svg>

4. 线的连接 - stroke-linejoin属性

属性可以使用miter,round,bevel三个值

<svg width="160" height="280">
  <polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20"
      stroke-linecap="butt" fill="transparent" stroke-linejoin="miter"/>

  <polyline points="40 140 80 100 120 140" stroke="black" stroke-width="20"
      stroke-linecap="round" fill="transparent" stroke-linejoin="round"/>

  <polyline points="40 220 80 180 120 220" stroke="black" stroke-width="20"
      stroke-linecap="square" fill="transparent" stroke-linejoin="bevel"/>
</svg>

5. 线的虚实 - stroke-dasharray属性

<svg width="200" height="150">
  <path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black"
    stroke-linecap="round" stroke-dasharray="5,10,5" fill="none"/>
  <path d="M 10 75 L 190 75" stroke="red"
    stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5" fill="none"/>
</svg>

12. 颜色

基本有下面这些定义颜色的方式：

颜色名字：直接使用颜色名字red, blue, black...
rgba/rgb值：这个也很好理解，例如rgba(255,100,100,0.5)。
十六进制值：用十六进制定义的颜色，例如#ffffff。
渐变值：支持两种渐变色：

12.1 线性渐变

<svg width="120" height="240">
<defs>
    <linearGradient id="Gradient1" x1="0" x2="0" y1="0" y2="1">
      <stop offset="0%" stop-color="red"/>
      <stop offset="50%" stop-color="black" stop-opacity="0"/>
      <stop offset="100%" stop-color="blue"/>
    </linearGradient>
  </defs>

  <rect id="rect1" x="10" y="10" rx="15" ry="15" width="100" height="100"/>
  <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient1)"/>
</svg>

12.2 注意：

1. 渐变色元素必须要放到defs元素中；
2. 需要给渐变色元素设置id值，否则的话，别的元素无法使用这个渐变色。
3. 渐变色的成员使用stop定义，它的属性也可以使用CSS定义；它支持class，id这种标准HTML都支持的属性。其它常用属性如下：
offset属性：这个定义了该成员色的作用范围，该属性取值从0%到100%(或者是0到1)；通常第一种颜色都是设置成0%，最后一种设置成100%。
stop-color属性：这个很简单，定义了该成员色的颜色。
stop-opacity属性：定义了成员色的透明度。
x1,y1,x2,y2属性：这两个点定义了渐变的方向，默认不写的话是水平渐变，上面例子中同时也创建了一个垂直渐变。
4. 渐变色的使用，如例子中所示，直接用url(#id)的形式赋值给fill或者stroke就可以了。
5. 渐变色成员的复用：你也可以使用xlink:href引用定义过的渐变色成员，所以上面的例子也可以改写如下：

<linearGradient id="Gradient1">
   <stop class="stop1" offset="0%"/>
   <stop class="stop2" offset="50%"/>
   <stop class="stop3" offset="100%"/>
</linearGradient>
<linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1" xlink:href="#Gradient1"/>

12.3 径向渐变

<svg width="120" height="240">
  <defs>
      <radialGradient id="Gradient3">
        <stop offset="0%" stop-color="red"/>
        <stop offset="100%" stop-color="blue"/>
      </radialGradient>
      <radialGradient id="Gradient4" cx="0.25" cy="0.25" r="0.25">
        <stop offset="0%" stop-color="red"/>
        <stop offset="100%" stop-color="blue"/>
      </radialGradient>
  </defs>

  <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#Gradient3)"/>
  <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient4)"/>
</svg>

offset属性：这个和线性渐变的值是一样，但是含义不一样。在环形渐变中，0%代表圆心处，这个很好理解。

cx,cy,r属性：其实也很好理解，环形渐变，当然要定义环的圆心和半径了，体会一下上面例子中圆的大小和位置就能理解了。

fx,fy属性：定义颜色中心(焦点)处的位置，也就是渐变色最浓处的坐标，在上面例子中，红色最红的是圆心，这是默认效果；如果想改变一下，就可以设置fx,fy坐标值。

gradientUnits，它定义了定义渐变色使用的坐标单位。这个属性有2个可用值：userSpaceOnUse和objectBoundingBox。

　　objectBoundingBox是默认值，它使用的坐标都是相对于对象包围盒的(方形包围盒，不是方形包围盒的情况比较复杂，略过)，取值范围是0到1。例如上例中的cx,cy的坐标值(0.25,0.25)。意味着这个圆心是在包围盒的左上角1/4处，半径0.25意味着半径长是对象方形包围盒长的1/4，就像你们图中看到的那样。
　　userSpaceOnUse表示使用的是绝对坐标，使用这个设置的时候，你必须要保证渐变色和填充的对象要保持在一个位置。

至此，常用的基础静态元素我们已经有了初步了解，大家无需理解每一句意思（毕竟有工具帮我们画图），下一篇将开始进入高潮——增加动态变化

Report

声明

原创Article UI 网页