你真的学会了SVG图像绘制吗？一篇带你搞定

天涯学馆
580 阅读16分钟

目录

SVG属性

SVG（Scalable Vector Graphics）元素拥有众多属性，这些属性用于定义图形的外观、位置、变换、交互等特性。

基本图形属

  • width 和 height: 定义SVG元素或图形的宽度和高度。
  • x 和 y: 定义图形在坐标系中的位置，通常用于<rect>、<circle>、<ellipse>、<line>、<polyline>、<polygon>等元素。
  • rx 和 ry: 对于矩形 (<rect>)，定义圆角半径。
  • cx 和 cy: 对于圆形 (<circle>) 和椭圆 (<ellipse>)，定义中心点坐标。
  • r: 对于圆形 (<circle>), 定义半径；对于<radialGradient>，定义渐变的辐射半径。
  • fx 和 fy: 对于<radialGradient>，定义焦点坐标。
  • points: 对于折线 (<polyline>) 和多边形 (<polygon>), 定义一系列点坐标，形成图形轮廓。

填充与描边

  • fill: 定义图形内部的填充颜色。可以是颜色名、十六进制、RGB/RGBA、HSL/HSLA值，也可以是none表示无填充或引用<gradient>或<pattern>。
  • fill-opacity: 控制填充颜色的透明度。
  • stroke: 定义图形边缘的描边颜色，属性值与fill类似。
  • stroke-width: 描边的粗细。
  • stroke-linecap: 描边端点样式，可设为butt、round或square。
  • stroke-linejoin: 描边交汇处样式，如miter、round或bevel。
  • stroke-miterlimit: 限制斜接长度，防止尖锐的交角过度延伸。
  • stroke-dasharray 和 stroke-dashoffset: 定义虚线样式（间隙和段长）和起始偏移。
  • stroke-opacity: 控制描边颜色的透明度。

变换与定位

  • transform: 应用一系列变换（如旋转、缩放、平移、倾斜）到元素上。
  • viewBox: 为SVG元素定义一个视口，允许图形在不同尺寸的容器中保持比例缩放。
  • preserveAspectRatio: 控制SVG图形在viewBox与实际视口之间如何对齐和伸缩。

滤镜与效果

  • filter: 引用一个<filter>元素，为图形添加滤镜效果，如模糊、阴影、颜色调整等。

文本相关属性

  • font-family: 设置文本的字体系列。
  • font-size: 文本的字号。
  • font-weight 和 font-style: 控制文本的粗细和样式（如斜体）。
  • text-anchor: 文本在路径上的对齐方式，如start、middle或end。
  • letter-spacing 和 word-spacing: 字母和单词之间的间距。
  • text-decoration: 文本装饰，如underline、overline或line-through。

动画与交互

  • id: 为元素赋予唯一标识，用于CSS选择器或JavaScript操作。
  • class: 为元素添加类名，方便批量样式设置或脚本处理。
  • style: 内联CSS样式属性。
  • on* 事件属性: 如onclick、onmouseover等，用于添加交互行为。
  • <animate> 和 <animateTransform> 元素: 定义SVG动画，包括属性变化和变换动画。

其他

  • opacity: 整体控制元素的不透明度。
  • clip-path: 通过引用<clipPath>定义剪切区域，隐藏超出部分的内容。
  • mask: 通过引用<mask>定义遮罩效果，根据掩模图像的透明度决定元素的可见性。
  • pointer-events: 控制元素是否响应鼠标或其他指针设备事件。

SVG图像绘制

SVG路径

路径的基本结构

SVG路径（SVG Path）是SVG（Scalable Vector Graphics）中用于描述复杂形状或线条的一种基本图形元素。一个路径由一系列指令（commands）组成，这些指令定义了路径的构成线条、曲线、弧线、折线等，并确定了它们在SVG坐标空间中的位置、方向和形状。路径指令可以非常精确地描述几何形状，使其成为绘制任意矢量图形的强大工具。

<path d="M 100 100 L 200 200 Q 300 150 400 200 Z" />

路径指令

路径指令由一个或两个字母（大写或小写）表示，后面跟着参数列表。指令分为两大类：绝对坐标指令和相对坐标指令。大写字母表示绝对坐标，小写字母表示相对于前一个点的相对坐标。

基本指令：

  • M/m (moveto): 定义路径的起点或在路径中创建一个新的子路径的起点。后面跟两个参数（x, y），表示新点的坐标。

  • L/l (lineto): 从当前点画一条直线到指定点。后面跟两个参数（x, y），表示直线终点的坐标。

  • H/h (horizontal lineto): 从当前点画一条水平线到指定x坐标。

  • V/v (vertical lineto): 从当前点画一条垂直线到指定y坐标。

  • Z/z (closepath): 关闭当前路径，即从当前点画一条直线连接到路径的起点，形成一个封闭图形。

曲线指令：

  • C/c (cubic Bézier curve): 画一条三次贝塞尔曲线。后面跟六个参数（x1, y1, x2, y2, x, y），分别表示两个控制点和终点的坐标。

  • S/s (smooth cubic Bézier curve): 绘制平滑的三次贝塞尔曲线。如果前一个指令是C或S，则第一个控制点与前一曲线的第二个控制点对称；否则，该点与当前点重合。后面跟四个参数（x2, y2, x, y），表示第二个控制点和终点的坐标。

  • Q/q (quadratic Bézier curve): 画一条二次贝塞尔曲线。后面跟四个参数（x1, y1, x, y），分别表示一个控制点和终点的坐标。

  • T/t (smooth quadratic Bézier curve): 绘制平滑的二次贝塞尔曲线。如果前一个指令是Q或T，则控制点与前一曲线的控制点对称；否则，该点与当前点重合。后面跟两个参数（x, y），表示终点的坐标。

弧线指令： A/a (elliptical arc): 画一段椭圆弧线。后面跟七个参数（rx, ry, x-axis-rotation, large-arc-flag, sweep-flag, x, y），分别表示椭圆的半径（rx, ry）、旋转角度、是否画大弧、弧线方向（顺时针或逆时针）以及终点坐标。

路径示例

一个简单的SVG路径示例，描述了一个三角形：

<path d="M 100 100 L 200 100 L 200 200 Z" fill="blue" />

解释：

  • M 100 100: 移动到点（100, 100），这是三角形的第一个顶点。
  • L 200 100: 从当前点画直线到点（200, 100），形成第二条边。
  • L 200 200: 从当前点画直线到点（200, 200），形成第三条边。
  • Z: 关闭路径，从最后一个点画直线回到起点（100, 100），形成封闭三角形。

路径动画

SVG路径可以配合CSS动画或SMIL动画进行动态展示。通过动画属性如 stroke-dasharray 和 stroke-dashoffset，可以模拟路径被逐段绘制的效果，实现“绘制动画”。

例如，以下CSS代码实现了路径动画：

path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw-path 5s linear forwards;
}

@keyframes draw-path {
  to {
    stroke-dashoffset: 0;
  }
}

这段代码设置了初始时路径为虚线（stroke-dasharray），并完全偏移（stroke-dashoffset）。通过draw-path动画，逐渐减少偏移量，使得路径看似从头至尾被“绘制”出来。

SVG矩形

基本结构

在SVG文档中，矩形元素的基本结构如下：

<rect x="x坐标" y="y坐标" width="宽度" height="高度" [其他属性] />

其中，x 和 y 属性定义矩形左上角的坐标，width 和 height 分别指定矩形的宽度和高度。例如：

<rect x="50" y="50" width="200" height="100" />

矩形属性

除了基本的定位和尺寸属性外，SVG矩形还支持以下属性：

  • rx 和 ry: 定义矩形的圆角半径。若只指定 rx，则 ry 与其相等；若两者都指定，则分别控制矩形四个角的水平和垂直半径，形成圆角矩形。例如：
  <rect x="50" y="50" width="200" height="100" rx="20" />

fill: 定义矩形内部的填充颜色或渐变。可以是颜色名、十六进制、RGB/RGBA、HSL/HSLA值，也可以是 none 表示无填充或引用 或 。

  • fill-opacity: 控制填充颜色的透明度。
  • stroke: 定义矩形边缘的描边颜色，属性值与 fill 类似。
  • stroke-width: 描边的粗细。
  • stroke-linecap: 描边端点样式，可设为 butt、round 或 square。
  • stroke-linejoin: 描边交汇处样式，如 miter、round 或 bevel。
  • stroke-miterlimit: 限制斜接长度，防止尖锐的交角过度延伸。
  • stroke-dasharray 和 stroke-dashoffset: 定义虚线样式（间隙和段长）和起始偏移。
  • stroke-opacity: 控制描边颜色的透明度。
  • transform: 应用一系列变换（如旋转、缩放、平移、倾斜）到矩形上。
  • id 和 class: 用于标识和样式化矩形。
  • style: 内联CSS样式属性。
  • on* 事件属性: 如 onclick、onmouseover 等，用于添加交互行为。

示例

<svg width="300" height="200">
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#FF0000" />
      <stop offset="100%" stop-color="#00FF00" />
    </linearGradient>
  </defs>

  <rect x="50" y="50" width="200" height="100"
        rx="20" ry="20"
        fill="url(#gradient)"
        stroke="#000"
        stroke-width="2"
        stroke-dasharray="5, 5"
        stroke-opacity="0.8" />
</svg>

这个示例绘制了一个左上角位于（50, 50），宽高为200×100像素，具有20像素圆角的矩形。矩形内部填充了一个从红色渐变到绿色的线性渐变，描边为黑色，宽度为2像素，采用虚线样式，且描边具有一定的透明度。

动画

SVG矩形可以通过CSS动画或SMIL动画进行动态展示。例如，可以动画化地改变矩形的尺寸、位置、颜色、透明度等属性，或者应用变换（如旋转、缩放）来实现动画效果。

SVG圆形

SVG（Scalable Vector Graphics）中的圆形是通过 <circle> 元素来定义和绘制的。 <circle> 元素提供了几个关键属性来控制圆形的大小、位置、填充、描边等特性。

基本结构

<circle cx="圆心x坐标" cy="圆心y坐标" r="半径" [其他属性] />

其中，cx 和 cy 属性定义圆形的圆心坐标，r 属性指定圆形的半径。例如：

<circle cx="100" cy="75" r="50" />

这将绘制一个圆心位于（100, 75），半径为50像素的圆形。

圆形属性

除了基本的圆心坐标和半径属性外，SVG圆形还支持以下属性：

  • fill: 定义圆形内部的填充颜色或渐变。可以是颜色名、十六进制、RGB/RGBA、HSL/HSLA值，也可以是 none 表示无填充或引用 <gradient> 或 <pattern>。
  • fill-opacity: 控制填充颜色的透明度。
  • stroke: 定义圆形边缘的描边颜色，属性值与 fill 类似。
  • stroke-width: 描边的粗细。
  • stroke-linecap: 描边端点样式，对圆形无效（因为没有端点）。
  • stroke-linejoin: 描边交汇处样式，对圆形也无效（因为没有交汇处）。
  • stroke-miterlimit: 同上，对圆形无效。
  • stroke-dasharray 和 stroke-dashoffset: 定义虚线样式（间隙和段长）和起始偏移。
  • stroke-opacity: 控制描边颜色的透明度。
  • transform: 应用一系列变换（如旋转、缩放、平移、倾斜）到圆形上。
  • id 和 class: 用于标识和样式化圆形。
  • style: 内联CSS样式属性。
  • on* 事件属性: 如 onclick、onmouseover 等，用于添加交互行为。

示例

<svg width="300" height="200">
  <defs>
    <radialGradient id="gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="#FF0000" />
      <stop offset="100%" stop-color="#00FF00" />
    </radialGradient>
  </defs>

  <circle cx="150" cy="100" r="50"
          fill="url(#gradient)"
          stroke="#000"
          stroke-width="2"
          stroke-dasharray="5, 5"
          stroke-opacity="0.8" />
</svg>

这个示例绘制了一个圆心位于（150, 100），半径为50像素的圆形。圆形内部填充了一个从红色渐变到绿色的径向渐变，描边为黑色，宽度为2像素，采用虚线样式，且描边具有一定的透明度。

动画

SVG圆形可以通过CSS动画或SMIL动画进行动态展示。例如，可以动画化地改变圆形的尺寸、位置、颜色、透明度等属性，或者应用变换（如旋转、缩放）来实现动画效果。

SVG椭圆

SVG（Scalable Vector Graphics）中的椭圆是通过 <ellipse> 元素来定义和绘制的。 <ellipse> 元素提供了几个关键属性来控制椭圆的大小、位置、填充、描边等特性。

基本结构

在SVG文档中，椭圆元素的基本结构如下：

<ellipse cx="圆心x坐标" cy="圆心y坐标" rx="水平半径" ry="垂直半径" [其他属性] />

其中，cx 和 cy 属性定义椭圆的圆心坐标，rx 和 ry 分别指定椭圆的水平半径和垂直半径。例如：

<ellipse cx="150" cy="100" rx="100" ry="50" />

这将绘制一个圆心位于（150, 100），水平半径为100像素，垂直半径为50像素的椭圆。

椭圆属性

除了基本的圆心坐标和半径属性外，SVG椭圆还支持以下属性：

  • fill: 定义椭圆内部的填充颜色或渐变。可以是颜色名、十六进制、RGB/RGBA、HSL/HSLA值，也可以是 none 表示无填充或引用 <gradient> 或 <pattern>。
  • fill-opacity: 控制填充颜色的透明度。
  • stroke: 定义椭圆边缘的描边颜色，属性值与 fill 类似。
  • stroke-width: 描边的粗细。
  • stroke-linecap: 描边端点样式，对椭圆无效（因为没有端点）。
  • stroke-linejoin: 描边交汇处样式，对椭圆也无效（因为没有交汇处）。
  • stroke-miterlimit: 同上，对椭圆无效。
  • stroke-dasharray 和 stroke-dashoffset: 定义虚线样式（间隙和段长）和起始偏移。
  • stroke-opacity: 控制描边颜色的透明度。
  • transform: 应用一系列变换（如旋转、缩放、平移、倾斜）到椭圆上。
  • id 和 class: 用于标识和样式化椭圆。
  • style: 内联CSS样式属性。
  • on* 事件属性: 如 onclick、onmouseover 等，用于添加交互行为。

示例

<svg width="300" height="200">
  <defs>
    <radialGradient id="gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="#FF0000" />
      <stop offset="100%" stop-color="#00FF00" />
    </radialGradient>
  </defs>

  <ellipse cx="150" cy="100" rx="100" ry="50"
           fill="url(#gradient)"
           stroke="#000"
           stroke-width="2"
           stroke-dasharray="5, 5"
           stroke-opacity="0.8" />
</svg>

这个示例绘制了一个圆心位于（150, 100），水平半径为100像素，垂直半径为50像素的椭圆。椭圆内部填充了一个从红色渐变到绿色的径向渐变，描边为黑色，宽度为2像素，采用虚线样式，且描边具有一定的透明度。

动画

SVG椭圆可以通过CSS动画或SMIL动画进行动态展示。例如，可以动画化地改变椭圆的尺寸、位置、颜色、透明度等属性，或者应用变换（如旋转、缩放）来实现动画效果

SVG多边形

SVG（Scalable Vector Graphics）中的多边形是通过 <polygon> 元素来定义和绘制的。 <polygon> 元素通过一个点集（points）属性来指定多边形各顶点的坐标，从而构建出所需的多边形形状。

基本结构

在SVG文档中，多边形元素的基本结构如下：

<polygon points="顶点1x,顶点1y 顶点2x,顶点2y ... 顶点nx,顶点ny" [其他属性] />

points 属性值是一个由空格分隔的一系列坐标对，每个坐标对代表一个多边形顶点的x轴和y轴坐标。例如：

<polygon points="20,10 .jpg" alt="多边形示例" style="width: .png" />

这将绘制一个由（20, 10）、（30, ½）、（40, 10）和（30, 20）四个顶点构成的四边形。

多边形属性

除了基本的顶点坐标集合属性外，SVG多边形还支持以下属性：

  • fill: 定义多边形内部的填充颜色或渐变。可以是颜色名、十六进制、RGB/RGBA、HSL/HSLA值，也可以是 none 表示无填充或引用 或 。
  • fill-opacity: 控制填充颜色的透明度。
  • stroke: 定义多边形边缘的描边颜色，属性值与 fill 类似。
  • stroke-width: 描边的粗细。
  • stroke-linecap: 描边端点样式，可设为 butt、round 或 square。
  • stroke-linejoin: 描边交汇处样式，如 miter、round 或 bevel。
  • stroke-miterlimit: 限制斜接长度，防止尖锐的交角过度延伸。
  • stroke-dasharray 和 stroke-dashoffset: 定义虚线样式（间隙和段长）和起始偏移。
  • stroke-opacity: 控制描边颜色的透明度。
  • transform: 应用一系列变换（如旋转、缩放、平移、倾斜）到多边形上。
  • id 和 class: 用于标识和样式化多边形。
  • style: 内联CSS样式属性。
  • on* 事件属性: 如 onclick、onmouseover 等，用于添加交互行为。

示例

<svg width="300" height="200">
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#FF0000" />
      <stop offset="100%" stop-color="#00FF00" />
    </linearGradient>
  </defs>

  <polygon points="50,50 150,50 100,150"
           fill="url(#gradient)"
           stroke="#000"
           stroke-width="2"
           stroke-dasharray="5, 5"
           stroke-opacity="0.8" />
</svg>

这个示例绘制了一个由（50, 50）、（150, 50）和（100, 150）三个顶点构成的三角形多边形。多边形内部填充了一个从红色渐变到绿色的线性渐变，描边为黑色，宽度为2像素，采用虚线样式，且描边具有一定的透明度。

动画

SVG多边形可以通过CSS动画或SMIL动画进行动态展示。例如，可以动画化地改变多边形的顶点坐标、尺寸、位置、颜色、透明度等属性，或者应用变换（如旋转、缩放）来实现动画效果。

SVG曲线

SVG（Scalable Vector Graphics）中的曲线包括二阶贝塞尔曲线（Quadratic Bezier Curves）、三阶贝塞尔曲线（Cubic Bezier Curves）以及弧线（Elliptical Arcs）。这些曲线类型丰富了SVG路径的表现力，允许创建平滑过渡、复杂形状以及精确控制曲线形态。

二阶贝塞尔曲线 (Q / q)

二阶贝塞尔曲线由一个起点、一个终点以及一个控制点（Control Point）定义。控制点影响曲线的弯曲程度和方向。

绝对坐标形式 (Q):

<path d="M x1, y1 Q x2, y2 x3, y3" />
  • (x1, y1) 是当前点或路径起始点。
  • (x2, y2) 是控制点，决定了从当前点到终点的曲线形态。
  • (x3, y3) 是终点，曲线在此处结束。

相对坐标形式 (q):

<path d="M x1, y1 q dx2, dy2 dx3, dy3" />

-(dx2, dy2) 和 (dx3, dy3)分别是相对于当前点的控制点和终点坐标差值。

三阶贝塞尔曲线 (C / c)

三阶贝塞尔曲线比二阶贝塞尔曲线更复杂，由一个起点、一个终点以及两个控制点（Control Points）定义。这两个控制点分别影响曲线的起点到中间部分以及中间到终点的形态。

绝对坐标形式 (C):

<path d="M x1, y1 C x2, y2 x3, y3 x4, y4" />
  • (x1, y1) 是当前点或路径起始点。
  • (x2, y2) 和 (x3, y3) 是两个控制点，分别影响曲线的两段。
  • (x4, y4) 是终点，曲线在此处结束。

相对坐标形式 (c):

<path d="M x1, y1 c dx2, dy2 dx3, dy3 dx4, dy4" />

(dx2, dy2)、(dx3, dy3) 和 (dx4, dy4) 分别是相对于当前点的两个控制点和终点坐标差值。

弧线 (A / a)

弧线是沿着椭圆或圆的一部分绘制的曲线。它需要更多的参数来定义：

绝对坐标形式 (A):

<path d="M x1, y1 A rx, ry x-axis-rotation large-arc-flag, sweep-flag x2, y2" />
  • (x1, y1) 是当前点或路径起始点。
  • rx 和 ry 是椭圆的水平和垂直半径。
  • x-axis-rotation 是椭圆相对于x轴的旋转角度（以度为单位）。
  • large-arc-flag 是一个布尔值（0或1），决定是否取较大角度的弧段。
  • sweep-flag 是一个布尔值（0或1），决定弧线是顺时针还是逆时针方向。
  • (x2, y2) 是弧线终点。

相对坐标形式 (a):

<path d="M x1, y1 a rx, ry x-axis-rotation large-arc-flag, sweep-flag dx, dy" />

(dx, dy) 是相对于当前点的终点坐标差值。

示例

绘制一个包含二阶贝塞尔曲线、三阶贝塞尔曲线和弧线的SVG路径：

<svg width="300" height="200">
  <path d="
    M 50,50   <!-- 起点 -->
    Q 100,.png 150,100   <!-- 二阶贝塞尔曲线 -->
    C 200,50 250,150 300,100   <!-- 三阶贝塞尔曲线 -->
    A .jpg 20 0 0 1 350,150   <!-- 弧线 -->
  " fill="none" stroke="black" />
</svg>

动画

SVG曲线可以通过CSS动画或SMIL动画进行动态展示。例如，可以动画化地改变曲线的控制点、终点、半径、旋转角度等属性，或者应用变换（如旋转、缩放）来实现动画效果。

avatar
文章
阅读
粉丝