🔥 SVG | 郭飞的笔记

SVG介绍

SVG是什么？

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
SVG 是万维网联盟的标准
SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

<svg width="300" height="300" style="border: 1px solid steelblue">
</svg>

viewBox="0 0 120 20"
- 分别是 x, y, weight, height
- 意义稍复杂：原本的图像上按照 (x, y, weight, height) 选出一个框，然后只显示这个框内的部分
width="300" height="300"
- 定义此容器的宽度和高度，默认单位为 px
x="110" y="0"
- 指定此容器在父容器中的起始位置，左上角代表 (0, 0)

如何引用svg文件

<object data="https://www.guofei.site/pages/trophy.svg"></object>
<img src="https://www.guofei.site/pages/trophy.svg">

SVG 预定义形状

共有属性

stroke 和 stroke-width 轮廓颜色和轮廓宽度
- stroke-opacity 边框透明度
fill 填充色，fill-opacity透明度

矩形 rect

<svg width="100%" height="200px" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="20" rx="30" ry="5" width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>
</svg>

x, y 左上顶点的坐标
rx, ry 产生圆角

圆形 circle

<svg width="100%" height="200px" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
</svg>

cx 和 cy 定义圆中心的坐标，默认0
r 属性定义圆的半径。

椭圆 ellipse

<svg width="100%" height="300px" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="300" cy="150" rx="200" ry="80"
style="fill:rgb(200,100,50);
stroke:rgb(0,0,100);stroke-width:2"/>
</svg>

cx, cy 定义圆点的坐标
rx 属性定义水平半径
ry 属性定义垂直半径

线 line

<svg width="100%" height="300px" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="0" x2="300" y2="300"
style="stroke:rgb(99,99,99);stroke-width:2"/>
</svg>

x1, y1 线条开始的坐标
y1, y2 线条结束的坐标

多边形 polygon

<svg width="100%" height="300px" xmlns="http://www.w3.org/2000/svg">
<polygon points="220,100 300,210 170,250"
style="fill:#cccccc;
stroke:#000000;stroke-width:1"/>
</svg>

points 属性定义多边形每个角的 x 和 y 坐标

折线 polyline

<svg width="60px" height="60px" xmlns="http://www.w3.org/2000/svg">
<polyline points="0,0 0,20 20,20 20,40 40,40 40,60"
style="fill:white;stroke:red;stroke-width:2"/>
</svg>

路径 path

<svg width="100%" height="100%"  xmlns="http://www.w3.org/2000/svg">
<path d="M10 15 L30 35 L20 40 Z"/>
</svg>

<svg width="130px" height="130px" xmlns="http://www.w3.org/2000/svg">
  <path d="M52 70 
           C52 70 50 70 50 70 
           C50 75 52 80 55 80 
           C63 80 70 75 70 70 
           C70 58 63 50 55 50 
           C41 50 30 58 30 70 
           C30 86 41 100 55 100 
           C74 100 90 86 90 70 
           C90 47 74 30 55 30 
           C30 30 10 47 10 70 
           C10 97 30 120 55 120 
           C85 120 110 97 110 70 
           C110 36 85 10 55 10" 
        style="fill:white;stroke:red;stroke-width:2"/>
</svg>

参数意义：

M = moveto，代表起始位置。（可以有多个）
L = lineto，使用直线到新位置
H = horizontal lineto；V = vertical lineto，水平或者垂直连线，一个变量控制
C = curveto；S = smooth curveto。Cubic Bezier 曲线
- C 后面跟3对数字，分别是：起始点坐标，控制点坐标、终点坐标
- S 后面跟2对数字，分别是：控制点坐标、终点坐标。其起点坐标是自动计算的
Q = quadratic Belzier curve；T = smooth quadratic Belzier curveto。Quadratic Bezier 曲线：使用一个起始点，一个终止点以及一个控制点定义
A = elliptical Arc。截取椭圆的弧形成的曲线
Z = closepath，用来闭合曲线，连接到启始点

注：以上所有命令：大写表示绝对定位，小写表示相对定位，相对定位指的是相对上一个点的位置

其它写法，为了压缩空间：

多余的空格可以删除，M 100 100 L 200 200 => M100 100L200 200
如果一个命令字母之前有一个相同的命令字母，则该命令字母可以被删除，举例如下，M 100 200 L 200 100 L -100 -200 => M 100 200 L 200 100 -100 -200

文字 text

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="50" height="20" role="img">
  <text x="0" y="20" style="fill:red;">文字
  </text>
</svg>

这里的y似乎是中心的位置，因此设定为0会看不清。

fill：默认 black
stroke="blue"：加一层描边。如果再把fill设为none，就变成空心字。
font-size="36"
font-weight=600
font-family="Times New Roman"
font-style="italic"
长度 textLength="150" lengthAdjust="spacing"。spacing 只调整字符之间的间隔， spacingAndGlyphs 调整间隔和字符大小
transform="rotate(90, 70, 20)" 旋转。 rotate="-90"，字体本身旋转。两个结合可以实现竖向文字
其它：text-anchor对齐方式，textPath：按照路径画图

参考：https://blog.csdn.net/weixin_40779234/article/details/113701444

超链接

向矩形添加一个 “a” 元素，这样矩形就可以作为一个超级链接了。

g

用来分组，可以让整个组做一些变化

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <g transform="rotate(45 50 50)">
      <rect x="0" y="20" height="50" width="75"
          style="stroke: #006600; fill: #006600"/>
      <text x="10" y="90" style="stroke: #660000; fill: #660000">
        hello</text>
    </g>

</svg>

transform="translate(x-value, y-value)" 平移
transform="scale(x-value, y-value)" 缩放xx倍
transform="rotate(angle,[centerX, centerY])"，指定圆心和角度来旋转
transform="skewX(angle) skewY(angle)" 沿X轴或者Y轴歪斜 angle 角度

子元素会继承g的样式

<svg width="320" height="150">
	<g style="stroke: #0000ff; stroke-width: 4px; fill: red">
		<rect    x="10"  y="10" width="100" height="50" />
		<circle cx="150" cy="35" r="25" />
		<circle cx="250" cy="35" r="25"
			   style="stroke: #009900; fill: #00ff00;"/>
	</g>
</svg>

关于位置：

子元素的 x,y 位置是相对于整个 svg 的，而不是相对 g 的
tranform 直接作用于 svg 本身是不起作用的，但transform 对 g 可以起作用。因此可以用 g 来作为分组

参考：https://blog.csdn.net/qq_39492374/article/details/89356931

渐变和滤镜

图像合成类
- feBlend，将两个图像按照指定的混合模式进行混合
- feComposite，两个图片按照指定的合成符做组合（包括 over、in、out、atop、xor、arithmetic）
- feDisplacementMap，用第二张图的颜色信息，改变第一种图中像素的位置
颜色变换类
- feColorMatrix，对颜色做矩阵变换
- feComponentTransfer，对各颜色通道做单独映射变换
图像处理类
- feConvolveMatrix，对图像做卷积（实现模糊、锐化、边缘检测效果）
- feDiffuseLighting，反射光照效果（三维浮雕效果）
- feGaussianBlur，高斯模糊
- feMorphology，形态学（膨胀、腐蚀）
- feOffset，多用来产生阴影/浮动效果
- feSpecularLighting，模拟镜面光泽
- feDistantLight，定义一个来自无限远处的平行光源，常用于光照滤镜。用于 feDiffuseLighting 和 feSpecularLighting 等。
- fePointLight 定义一个点光源，从某一确定位置向各方向发射光线
- feSpotLight 定义一个聚光灯光源，产生具有方向性和锥形边界的光照效果
基础功能类
- feFlood，生成一张填充指定颜色的图像
- feImage，引入外部图像
- feMerge，合并多个滤镜
- feMergeNode
feTile，把图片平铺并填满区域，常用来纹理创建
feTurbulence，生成噪声图案，常用于制作云彩、水波、火焰等自然纹理。可调节频率和八度数以控制细节复杂度。

线性渐变 linearGradient

<svg width="200px" height="160px" >
<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
  <stop offset="0%" style="stop-color:rgb(255,255,0); stop-opacity:1"/>
  <stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:1"/>
</linearGradient>
</defs>
<ellipse cx="100" cy="100" rx="85" ry="55"
style="fill:url(#orange_red)"/>
</svg>

多个stop来定义不同的颜色
offset 属性用来定义渐变的开始和结束位置。
stop-opacity 定义透明度

上面这两个渐变做“奖杯”很不错

放射性渐变 radialGradient

<svg width="300px" height="300px">
<defs>
    <radialGradient id="grey_blue" cx="50%" cy="50%" r="50%"
    fx="50%" fy="50%">
        <stop offset="0%" style="stop-color:rgb(200,200,200);
        stop-opacity:0"/>
        <stop offset="100%" style="stop-color:rgb(0,0,255);
        stop-opacity:1"/>
    </radialGradient>
</defs>
<ellipse cx="120" cy="120" rx="110" ry="100"
style="fill:url(#grey_blue)"/>
</svg>

feGaussianBlur

<svg width="300px" height="300px">
<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="6" />
</filter>
</defs>
<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"/>
</svg>

其它案例

feBlend

将两个输入图像（in 和 in2）混合，有多种混合模式：

normal
multiply
screen
darken
lighten

feColorMatrix 滤镜

其 value 是一个 4x5 矩阵，它左乘 [R, G, B, A, 1] 得到一个新的 RGBA 值（线性变换）

feComponentTransfer 滤镜

feOffset 滤镜

feMorphology 滤镜

形态学操作（腐蚀、膨胀）

其它滤镜

一个光照效果的例子：

动画

重复用 5 秒时间淡出的矩形

移动的矩形

会变颜色的3矩阵

沿一个运动路径移动的文本

沿一个运动路径移动、旋转并缩放的文本

其它

根据页面宽度改变布局

<svg class="svg-container" height="800" width="200" viewBox="0 0 400 100" xmlns="http://www.w3.org/2000/svg">
    <rect width="25%" height="100%" fill="#FF5733" />
    <rect x="25%" width="25%" height="100%" fill="#33FF57" />
    <rect x="50%" width="25%" height="100%" fill="#3357FF" />
    <rect x="75%" width="25%" height="100%" fill="#FF33A8" />
    <style>
        @media (max-width: 500px) {
            svg rect:nth-child(1) { x: 0%; y: 0%; width: 50%; height: 50%; }
            svg rect:nth-child(2) { x: 50%; y: 0; width: 50%; height: 50%; }
            svg rect:nth-child(3) { x: 0; y: 50%; width: 50%; height: 50%; }
            svg rect:nth-child(4) { x: 50%; y: 50%; width: 50%; height: 50%; }
        </style>
</svg>

/* style中的下面代码，用于在 Firefox 下做特定的样式 */
@supports(-moz-appearance: auto) {
  /* Selector detects Firefox */
  .header { font-size: 15.5px; }
}

问题

SVG 是否支持声音。可以通过 HTML5 标签实现与声音联动。但原则上不支持。

一些好用的 SVG

月桂花环的一半

圣杯