你真的了解SVG吗

gitboyzcf
300 阅读5分钟

前言

可能你听说过svg图标

比如 iconfont、iconify 等这些图标库中都可以以svg的方式复制使用

svg还可以做更好看的比如 最近发现vite官网重构了 看到下面效果

动画 (5).gif

是不是有点炫酷

F12检查代码发现全部都是svg实现

下面一起去了解svg神秘之处

Svg

可缩放矢量图形（Scalable Vector Graphics，SVG），基于 XML 标记语言，用于描述二维的矢量图形

Svg标签上的属性

width height x y fill stroke stroke-width transform opacity

（preserveAspectRatio xmlns viewBox）只能在标签上设置 其他可以用css控制

  • width/height

    设置svg宽高 默认铺满父级容器 px值

  • x/y

    当svg嵌套写法时会生效 以父svg为基准设置x y位置

  • fill

    颜色填充 设置svg全局颜色

  • stroke/stroke-width

    设置svg全局的描边颜色以及宽度

  • transform

    与css中的transform 相似 不带单位 例：transform="rotate(45)"

  • opacity

    svg透明度

  • xmlns

    浏览器解析时的标识告诉浏览器以svg的标准去解析 通常定义 xmlns="http://www.w3.org/2000/svg" 固定写法

  • viewBox

设置svg裁剪层，只有在裁剪的范围内才会显示svg中的图形 例如viewBox="0 0 100 200" 0 0 表示从x y 处开始裁剪 裁剪宽高为100 200

  • preserveAspectRatio

    设置裁剪的铺满和对齐方式 与viewBox一起使用

注意：css设置的样式优先级比属性设置的优先级高

Svg标签内部的图形标签

image.png

<rect></rect> 矩形 developer.mozilla.org/zh-CN/docs/…

<circle></circle> 正圆形 developer.mozilla.org/zh-CN/docs/…

<ellipse></ellipse> 椭圆 developer.mozilla.org/zh-CN/docs/…

属性：

cx/cy：圆心的坐标位置

rx/ry：半径

<line></line> 直线 developer.mozilla.org/zh-CN/docs/…

属性：

x1/y1：第一个点的位置

x2/y2：第二个点的位置

<polyline></polyline> 折线 developer.mozilla.org/zh-CN/docs/…

属性：

points：点的集合，绘制成折线 例如：points="0,100 50,25 50,75 100,0"

<polygon></polygon> 多边形 developer.mozilla.org/zh-CN/docs/…

属性：

points：点的集合，绘制成形状 例如：points="0,100 50,25 50,75 100,0"

<path></path> 路径 developer.mozilla.org/zh-CN/docs/…

属性：

d：属性定义了一个要绘制的路径 例如：points="0,100 50,25 50,75 100,0"

例如：<path d="M 10 10 H 90 V 90 H 10 Z" />

这个例子定义了一个从 (10, 10) 开始，向右到 (90, 10)，向下到 (90, 90)，再向左到 (10, 90) 并最终回到起点 (10, 10) 的正方形路径。

d属性的值支持一下格式

  1. M m (moveto)

    • M x y 或 m dx dy - 移动到指定的点 (x, y) 或从当前位置移动 (dx, dy)。
    • 示例：M 50 50 或 m 10 10。

  2. L l (lineto)

    • L x y 或 l dx dy - 从当前位置画直线到 (x, y) 或移动 (dx, dy)。
    • 示例：L 100 100 或 l 50 50。

  3. H h (horizontal lineto)

    • H x 或 h dx - 水平画直线到 x 坐标 x 或水平移动 dx。
    • 示例：H 200 或 h 50。

  4. V v (vertical lineto)

    • V y 或 v dy - 垂直画直线到 y 坐标 y 或垂直移动 dy。
    • 示例：V 200 或 v 50。

  5. C c (curveto)

    • C x1 y1 x2 y2 x y 或 c dx1 dy1 dx2 dy2 dx dy - 从当前位置到 (x, y) 画一条三次 Bézier 曲线，控制点为 (x1, y1) 和 (x2, y2)。
    • 示例：C 100 100 150 150 200 200 或 c 50 50 50 50 50 50。

  6. S s (smooth curveto)

    • S x2 y2 x y 或 s dx2 dy2 dx dy - 绘制一条平滑的三次 Bézier 曲线到 (x, y)，前一个控制点是对称的。
    • 示例：S 150 150 200 200 或 s 50 50 50 50。

  7. Q q (quadratic Bézier curve)

    • Q x1 y1 x y 或 q dx1 dy1 dx dy - 从当前位置到 (x, y) 画一条二次 Bézier 曲线，控制点为 (x1, y1)。
    • 示例：Q 150 150 200 200 或 q 50 50 50 50。

  8. T t (smooth quadratic Bézier curveto)

    • T x y 或 t dx dy - 画一条平滑的二次 Bézier 曲线到 (x, y)，前一个控制点是对称的。
    • 示例：T 200 200 或 t 50 50。

  9. A a (elliptical Arc)

    • A rx ry x-axis-rotation large-arc-flag sweep-flag x y 或 a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy - 画一条椭圆弧线到 (x, y) 或 (dx, dy)。
    • 示例：A 50 50 45 0 1 100 100 或 a 50 50 45 0 1 50 50。

  10. Z z (closepath)

    • Z 或 z - 关闭路径。
    • 示例：Z 或 z。

Svg 动画

标签以及标签属性

<animate> 当前标签为动画标签 ，使用时需要放入一个图形标签中，一个图形可以放入多个animate标签 developer.mozilla.org/zh-CN/docs/…

例：

<svg viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg">
  <!-- 第一种使用方式 -->
  <rect x="50" y="50" width="100" height="100">
    <animate
      attributeType="XML"
      attributeName="y"
      from="0"
      to="50"
      dur="5s"
      repeatCount="indefinite" />
  </rect>
  <!-- 第二种使用方式 -->
  <rect id="myRect" x="50" y="50" width="100" height="100"/>
  <animate
    href="#myRect"
    attributeType="XML"
    attributeName="y"
    from="0"
    to="50"
    dur="5s"
    repeatCount="indefinite" />
</svg>

属性：

attributeName 要变化的属性名称

form/to：从哪个值开始/从哪个值结束
by属性 是变化多少和to相似 两者取其一都中

dur：动画时长

repeatCount：重复几次

repeatDur：重复总的时长

fill：动画结束后是否保持当前状态 href：对当前动画进行绑定

高级属性

begin 表示什么时候开始

  • 延迟启动

image.png

  • 事件触发

    image.png

  • 与其他动画同步

    image.png

  • 基于事件的延迟启动

    image.png

  • 多种触发条件

    image.png

  • 使用indefinite

    image.png

end 表示什么时候结束

  • 与begin属性用法一致

更多请看 developer.mozilla.org/zh-CN/docs/…

案例

avatar
文章
阅读
粉丝