svg基本使用
用户小王 2024-08-22 15:33:01 阅读 65
简介：
1、前言：
位图：放大会失真图像边缘有锯齿；是由像素点组成；前端的 Canvas 就是位图效果。矢量图：放大不会失真；使用 XML 描述图形。
对于初学 SVG 的前端来说，可以简单的理解为 “SVG 是一套新标签”。所以可以使用 CSS 来设置样式，也可以使用 JS 对 SVG 进行操作。在不设置宽高的情况下，默认为300 * 150，当内部元素大于300 * 150时，大于部分会被隐藏
2、viewBox 属性定义了SVG中可以显示的区域。
语法：viewBox=“x y w h” x、y为起始点，w、h为显示区域的宽高。
示例：
<code><svg width="300" height="300" viewBox="0 0 100 100">code>
<circle cx="100" cy="100" r="100" />code>
</svg>
为什么不是一个100大小的圆显示在画布上呢？
viewBox定义了一个：从（0, 0）点开始，宽高为100 * 100的显示区域。而这个100 * 100的显示区域会放到300 * 300(svg宽高)的SVG中去显示，整体就放大了3倍
3、version
version属性用于指明SVG的版本，也就是指明SVG文档应该遵循的规范。version属性纯粹就是一个说明，对渲染或处理没有任何影响。且目前只有1.0 和 1.1这两个版本。
<code><svg version="1.1">code>
// ...
</svg>
4、xmlns和xmlns:xlink
5、用
创建组合对象
两种方法可以使我们的图标随时可用：将它们转换为组合，或转换为模板。我们将把前面的一半图标转换成组合，然后把剩下的一半变成模板，这样我们就可以说明他们之间的区别
要把我们的一个图标转换成一个组合，我们要做的就是用标签
<code><g id="leftalign">code>
<!-- 左对齐图标 -->
<line x1="3" y1="3" x2="48" y2="3"></line>code>
<line x1="3" y1="19" x2="65" y2="19"></line>code>
<line x1="3" y1="35" x2="48" y2="35"></line>code>
<line x1="3" y1="51" x2="65" y2="51"></line>code>
</g>
6、使用
来放置组合
在
元素内部我们现在有1个图标被定义成组合，我们准备在 SVG 中使用它们。为了使用它们，我们需要做的就是添加一个
元素（确保在
元素以外且之后的地方添加它），并设置一个 href 属性指向想要的那个图标的 ID。
<use href="#leftalign" x="100" y="100"></use>code>
7、使用 symbols 创建模板对象
除了组合之外，你也可以使用模板来定义你的图标
模板几乎和组合一样，但是你可以获得额外的设置来控制视口（viewbox）和长宽比。
viewBox的属性 让我们可以定义每个模板的可见部分应该是什么。属性4个值。前两个定义图标的左上角，第三和第四分别定义它的宽度和高度
<symbol id="alert" viewBox="0 0 86 86">code>
<!-- 警示图标 -->
<ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>code>
<ellipse style="fill:black;" cx="43" cy="65" rx="5" ry="5"></ellipse>code>
<line style="stroke-width: 8;" x1="43" y1="19" x2="43" y2="48"></line>code>
</symbol>
8、使用
来放置模板
我们可以像使用我们的组合一样使用我们的模板图标。不过我们也会提供已经设好了宽高属性为 100px 的图标。
试着给使用基于组合图标的
元素上添加宽高的属性。发现没什么变化。这是因为浏览器依靠的是 viewBox 的值（组合没有这个值）来确定如何缩放图标。
一、图形标签
1、矩形
矩形使用
标签，默认填充色是黑色，当只设置宽高时，渲染出来的矩形就是黑色的矩形。
矩形基础属性
x: 左上角x轴坐标 偏移距离y: 左上角y轴坐标width: 宽度height: 高度rx: 圆角，x轴的半径ry: 圆角，y轴的半径
<!DOCTYPE html>
<svg width="500" height="300" style="border: 1px solid red; margin-left: 100px;">code>
<rect x="50" y="50" width="200" height="150" rx="50" ry="50">code>
</rect>
</svg>
rx\ry 理解，画一个椭圆来切调不相交的部分
2、圆形
圆形使用
标签，基础属性有：
cx: 圆心在x轴的坐标cy: 圆心在y轴的坐标r: 半径
<code><!DOCTYPE html>
<svg width="500" height="300" style="border: 1px solid red; margin-left: 100px;">code>
<circle cx="350" cy="150" r="20"></circle>code>
</svg>
3、椭圆 ellipse
椭圆使用
标签，基础属性有：
cx: 圆心在x轴的坐标cy: 圆心在y轴的坐标rx: x轴的半径ry: y轴的半径
<code><!DOCTYPE html>
<svg width="500" height="300" style="border: 1px solid red; margin-left: 100px;">code>
<ellipse cx="450" cy="150" rx="40" ry="30"></ellipse>code>
</svg>
4、直线 line
直线使用
标签，基础属性有：
x1: 起始点x坐标y1: 起始点y坐标x2: 结束点x坐标y2: 结束点y坐标stroke: 描边颜色
<code><svg width="400" height="300" style="border: 1px solid red; margin: 10px">code>
<line x1="10" y1="10" x2="10" y2="50" stroke="#000"></line>code>
</svg>
5、折线polyline
使用
可以绘制折线，基础属性有：
points: 点集stroke: 描边颜色fill: 填充颜色
<code><svg width="400" height="300" style="border: 1px solid red; margin: 10px">code>
<polyline points="20 10, 100 10, 100 40" stroke="red" fill="none"></polyline>code>
<polyline points="20 10, 100 10, 100 40" stroke="red" fill="red"></polyline>code>
</svg>
6、多边形 polygon
多边形使用
标签，基础属性和
差不多：
points: 点集stroke: 描边颜色fill: 填充颜色
会自动闭合（自动将起始点和结束点链接起来）。
<code><svg width="400" height="300" style="border: 1px solid red; margin: 10px">code>
<polygon points="10 200, 200 80, 230 230" ></polygon>code>
</svg>
二、路径path
在 SVG 里，所有基本图形都是
的简写。所有描述轮廓的数据都放在 d 属性里，d 是 data 的简写。
d 属性又包括以下主要的关键字（注意大小写！）：
M: 起始点坐标，moveto 的意思。每个路径都必须以 M 开始。M 传入 x 和 y 坐标，用逗号或者空格隔开。L: 轮廓坐标，lineto 的意思。L 是跟在 M 后面的。它也是可以传入一个或多个坐标。大写的 L 是一个绝对位置。l: 这是小写 L，和 L 的作用差不多，但 l 是一个相对位置。H: 和上一个点的Y坐标相等，是 horizontal lineto 的意思。它是一个绝对位置。h: 和 H 差不多，但 h 使用的是相对定位。V: 和上一个点的X坐标相等，是vertical lineto 的意思。它是一个绝对位置。v: 这是一个小写的 v ，和大写 V 的差不多，但小写 v 是一个相对定位。Z: 关闭当前路径，closepath 的意思。它会绘制一条直线回到当前子路径的起点。Q 二次贝塞尔曲线T 延长二次贝塞尔曲线的简化命令C 用来绘制一条三次贝塞尔曲线，相对于二次贝塞尔曲线多了一个控制点S 三次贝塞尔曲线的S命令和二次贝塞尔曲线的T命令比较相似。S命令也可以用来创建与前面一样的贝塞尔曲线，但如果S命令跟在一个C命令或者另一个S命令的后面，那么它的第一个控制点，就会被假设成前一个控制点的对称点。A 用于画弧形，它可以截取圆或椭圆的弧形成的曲线
画直线demo
<code><svg width="400" height="300" style="border: 1px solid red; margin: 10px">code>
<path d="M 300 100 L 300 130 L 350 160" stroke="blue" fill="none"></path>code>
<path d="M 300 200 L 300 230 L 350 260 Z" stroke="green" fill="none"></path>code>
<!-- 同上，用 V 省略了 水平坐标 -->
<path d="M 300 200 V 230 L 350 260 Z" stroke="green" fill="none"></path>code>
<!-- 同上 全L 可直接省略 -->
<path d="M 300 200 300 230 350 260 Z" stroke="green" fill="none"></path>code>
</svg>
画圆弧demo
A(rx, ry, xr, laf, sf, x, y)
在 SVG 中可以使用 path 配合 A属性 绘制椭圆弧。
rx: 椭圆X轴半径ry: 椭圆Y轴半径xr: 椭圆旋转角度laf: 是否选择弧长较长的那一段。0: 短边（小于180度）; 1: 长边（大于等于180度）sf: 是否顺时针绘制。0: 逆时针; 1: 顺时针x: 终点X轴坐标y: 终点Y轴坐标
上面的公式中并没有开始点，开始点是由 M 决定的。
<code><path d="M 300 200 A 50 50 0 0 1 400 200 Z" stroke="green" fill="none"></path>code>
三、设置样式的方式和css一样
fill + style + class + 外部引入， 注意这个样式只能是svg自己的样式才生效
比如我设置一个style=“background-color: red” 不管用，得设置成 style=“fill: red”
四、常用样式设置
1、fill 填充
填充图案颜色，可以设置 fill 属性。这个属性在前面的例子也使用过多次。
可以使用 none 或者 transparent 将填充色设置成透明
2、填充色的不透明度 fill-opacity
可以设置 fill-opacity 属性，也可以在 fill 属性中使用 RGBA 或者 HSLA。
本例使用 fill-opacity 设置，它的取值是 0 - 1，0 代表完全透明，1 代表完全不透明。小于 0 的值会被改为 0，大于 1 的值会被改为 1 。
<code><svg width="400" height="400" style="border: 1px solid red;">code>
<rect
x="100"code>
y="100"code>
width="200"code>
height="100"code>
fill="red"code>
fill-opacity="0.2"code>
/>
</svg>
3、描边stroke
（1）描边宽度 stroke-width
<code><svg width="400" height="400" style="border: 1px solid red;">code>
<rect
x="100"code>
y="100"code>
width="200"code>
height="100"code>
fill="none"code>
stroke="blue"code>
stroke-width="10"code>
/>
</svg>
（2）描边的透明度stroke-opacity
<code><svg width="400" height="400" style="border: 1px solid red;">code>
<rect
x="100"code>
y="100"code>
width="200"code>
height="100"code>
fill="none"code>
stroke="blue"code>
stroke-opacity="0.3"code>
/>
</svg>
（3）描边虚线 stroke-dasharray
stroke-dasharray 接收一串数字，这串数字可以用来代表 线的长度和空隙的长度，数字之间用逗号或者空格分隔。
建议传入偶数个数字。但如果你传入了奇数个数字，SVG 会将这串数字重复一遍，使它的数量变成 偶数个 。
<code><svg>
<line x1="30" y1="70" x2="300" y2="70" stroke="blue" stroke-width="5" code>
stroke-dasharray="20 10" />code>
</svg>
（4）虚线偏移量 stroke-dashoffset
接收一个数值类型的值
<code><svg>
<line x1="0" y1="30" x2="300" y2="30" stroke="blue" stroke-width="5" code>
stroke-dasharray="20 10" />code>
<line x1="0" y1="70" x2="300" y2="70" stroke="blue" stroke-width="5" code>
stroke-dasharray="20 10" stroke-dashoffset="20" />code>
</svg>
（5）线帽 stroke-linecap
线的起始点和结束点的样式，用 stroke-linecap 属性可以设置线帽样式。
线帽有3个值：
butt: 平头（默认值）round: 圆头square: 方头
默认的linecap是占用线条的长度的，所以在一个svg画布上需要预留线帽的空间。
<code><svg width="300" height="300">code>
<!-- 默认 平头 -->
<line x1="5" y1="5" x2="200" y2="5" stroke="red" stroke-width="10"code>
style="stroke-linecap: butt;" />code>
<!-- 圆头 -->
<path stroke-linecap="round" stroke="orange" stroke-width="10" d="M5 20 L200 20" />code>
<line x1="5" y1="40" x2="200" y2="40" stroke="blue" stroke-width="10" code>
stroke-linecap="round" />code>
<!-- 方头 -->
<line x1="5" y1="60" x2="200" y2="60" stroke="green" stroke-width="10" code>
stroke-linecap="square" />code>
</svg>
（6）拐角 stroke-linejoin
拐角就是折线的交接点，可以使用 stroke-linejoin 设置，它接收以下属性：
miter: 尖角（默认）round: 圆角bevel: 平角
<code><svg width="260" height="260">code>
<!-- 尖角 默认 -->
<path d="M10 10 200 10 200 200" stroke-width="10" stroke="red" code>
stroke-linejoin="miter" fill="none"></path>code>
<!-- 圆角 -->
<path d="M10 30 180 30 180 200" stroke-width="10" stroke="orange" code>
stroke-linejoin="round" fill="none"></path>code>
<!-- 平角 -->
<path d="M10 50 160 50 160 200" stroke-width="10" stroke="blue" code>
stroke-linejoin="bevel" fill="none"></path>code>
</svg>
（7）消除锯齿 shape-rendering
如果你觉得 SVG 在浏览器显示出来的图像有点模糊，那可能是开启了 反锯齿 功能，可以通过 CSS 属性关闭该功能。
<code>shape-rendering: crispEdges;
将该属性设置到对应的 svg 元素上，就会关闭反锯齿功能，突显看起来就会清晰很对，但在某些情况关闭了该功能会让图像看起来有点毛躁的感觉。
如果想开启反锯齿功能，可以这样设置：shape-rendering: geometricPrecision;
示例 （ 没有看出来效果 ）
<svg>
<rect x="10" y="10" width="100" height="100" fill="orange" code>
style="shape-rendering: crispEdges"></rect>code>
</svg>
五、文本元素 text
使用
标签渲染文本。文本是有 **“基线”。**和 Canvas 一样，SVG 的文本对齐方式是以第一个字基线的左下角为基准
<code><svg width="400" height="400" style="border: 1px solid red;">code>
<text>呀呼嘿</text>
</svg>
如图所示文字并没有显示出来，因为对齐方式是以第一个字的基线的左下角为参考，默认的位置坐标是 (0, 0)
如果想显示出来必须向下移动字体的px，默认为html高度 16px, 此处移动16px
1、设置字号 font-size
2、设置字体粗细 font-weight
使用 font-weight 可以将文本设置成粗体。
normal: 默认（非粗体）bold: 粗体
这和 CSS 是一样的
3、装饰线 text-decoration
和 CSS 一样，可以使用 text-decoration 设置装饰线
none：默认underline: 下划线overline: 上划线line-through: 删除线
<code><svg width="400" height="400" style="border: 1px solid red;">code>
<!-- 默认 -->
<text
y="30"code>
font-size="30"code>
text-decoration="none"code>
>
呀呼嘿
</text>
<!-- 上划线 -->
<text
y="100"code>
font-size="30"code>
text-decoration="overline"code>
>
呀呼嘿
</text>
<!-- 删除线 -->
<text
y="170"code>
font-size="30"code>
text-decoration="line-through"code>
>
呀呼嘿
</text>
<!-- 下划线 -->
<text
y="240"code>
font-size="30"code>
text-decoration="underline"code>
>
呀呼嘿
</text>
</svg>
4、文本对齐
（1）水平对齐方式 text-anchor
可以通过 text-anchor 属性设置文本水平对齐方式。
如果本子是从左向右书写，那这几个参数的意思就是：
start: 左对齐middle: 居中对齐end: 右对齐
<code><svg width="200" height="200" style="border: 1px solid red;">code>
<!-- 参考线 -->
<path d="M 100 0 100 200" stroke="red"></path>code>
<text x="100" y="16" text-anchor="start">你好</text>code>
<text x="100" y="36" text-anchor="middle">你好</text>code>
<text x="100" y="56" text-anchor="end">你好</text>code>
</svg>
（2）多行文可以使用本
标签辅助实现
<code><svg width="400" height="400" style="border: 1px solid red;">code>
<text fill="blue">code>
<tspan x="10" y="30" fill="red">雷猴</tspan>code>
<tspan x="10" y="60">鲨鱼辣椒</tspan>code>
<tspan x="10" y="90">蟑螂恶霸</tspan>code>
<tspan x="10" y="120">蝎子莱莱</tspan>code>
</text>
</svg>
要放在
里，而且会继承
设置的样式。
如果在
里设置的样式和
的样式有冲突，最后会使用
的样式。
（3）垂直对齐方式 dominant-baseline
可以通过 dominant-baseline 属性设置文本垂直对齐方式
auto: 默认的对齐方式，保持与父元素相同的配置。text-after-edge: 在基线上方middle: 居中基线text-before-edge: 在基线下方
<code><svg width="400" height="400" style="border: 1px solid red;">code>
<!-- 参考线 -->
<path d="M 0 200 400 200" stroke="red"></path>code>
<!-- 默认 -->
<text
x="20"code>
y="200"code>
dominant-baseline="auto"code>
>
雷猴
</text>
<!-- 在基线上方 -->
<text
x="80"code>
y="200"code>
dominant-baseline="text-after-edge"code>
>
雷猴
</text>
<!-- 居中基线 -->
<text
x="160"code>
y="200"code>
dominant-baseline="middle"code>
>
雷猴
</text>
<!-- 在基线下方 -->
<text
x="240"code>
y="200"code>
dominant-baseline="text-before-edge"code>
>
雷猴
</text>
</svg>
（4）纵向文字 writing-mode
将 writing-mode 设置成 tb 就可以让文字纵向排列。
需要注意英文和中文的文字角度！
<code><svg width="400" height="400" style="border: 1px solid red;">code>
<text x="20" y="20" writing-mode="tb">Hello World!</text>code>
<text x="100" y="20" writing-mode="tb">鲨鱼辣椒</text>code>
</svg>
5、属性
(1) x和y属性决定了文字的绘制起点。
x和y的值可以是一个数列。如果设置为了一个数列则会应用到每一个字符上
<svg width="300" height="300">code>
<text
x="30 60 90 120 150 180 210 240 270" code>
y="60 90 120 150 180 150 120 90 60"code>
fill="#f00" code>
stroke="#0f0" code>
font-size="50"code>
font-weight="bold" >code>
Hello Svg !
</text>
</svg>
(2) dx和dy
dx和dy属性与x和y属性不同的是，x和y属性是绝对的坐标，而dx和dy属性是相对于当前位置的偏移量。
参数也可以是一个数列。如果设置为了一个数列则会应用到每一个字符上
<code><svg width="500" height="500">code>
<text
dx="50 10 10 10 10 10 10 10 10" code>
dy="50 20 -20 20 -20 20 -20 20 -20" code>
fill="#f00" code>
stroke="#0f0" code>
font-size="50"code>
font-weight="bold" >code>
Hello Svg !
</text>
</svg>
(3) rotate属性
rotate属性可以把文字旋转一个角度。也可以是数列同上
<code><svg width="500" height="500">code>
<text
x="50" code>
y="50" code>
rotate="10"code>
fill="#f00" code>
stroke="#0f0" code>
font-size="50"code>
font-weight="bold" >code>
Hello Svg !
</text>
</svg>
(4) textLength
textLength属性给定了一个字符串的计算长度。在文字的长度和textLength属性给定的长度不一致的情况下渲染引擎会精细调整字型的位置。
<code><svg width="550" height="500">code>
<text x="50" y="50" textLength="150" fill="#f00" stroke="#0f0" font-size="50"font-weight="bold" >code>
Hello Svg !
</text>
<text x="50" y="100" textLength="500" fill="#f00" stroke="#0f0" font-size="50" font-weight="bold" >code>
Hello Svg !
</text>
</svg>
(5) lengthAdjust
lengthadjust属性可以控制文本以什么方式伸展到由_textLength_属性定义的长度。
spacing：只拉伸或压缩间距（文字不变形）spacingAndGlyphs：同时拉伸或压缩间距和文字本身（文字变形）
<code><svg width="500" height="500">code>
<text x="50" y="50" textLength="200" lengthadjust="spacing" fill="#f00" stroke="#0f0" font-size="50" font-weight="bold" >code>
Welcome to the world of svg !
</text>
<text x="50" y="100" textLength="200" lengthadjust="spacingAndGlyphs" fill="#f00" stroke="#0f0" font-size="50" font-weight="bold" >code>
Welcome to the world of svg !
</text>
<text x="50" y="150" textLength="400" lengthadjust="spacing" fill="#f00" stroke="#0f0" font-size="50" font-weight="bold" >code>
Hi svg !
</text>
<text x="50" y="200" textLength="400" lengthadjust="spacingAndGlyphs" fill="#f00" stroke="#0f0" font-size="50" font-weight="bold" >code>
Hi svg !
</text>
</svg>
(6) fill和stroke
填充和轮廓也都可以应用于文字
<code><svg width="300" height="300">code>
<text x="50" y="50" fill="#f00" stroke="#0f0" font-weight="bold">Hello Svg !</text>code>
</svg>
重要 (7) textPath 非常牛
textPath标签可以利用它的xlink:href属性取得一个任意路径，并且可以让字符顺着路径渲染。
<code> <svg width="600" height="500">code>
<path id="pathM" d="M 50 50 100 100 200 50 300 100" fill="none" />code>
<path id="pathQ" d="M50 100 Q 175 200 300 100 T 600 100" fill="none" />code>
<text>
<textPath xlink:href="#pathM"> Welcome to the world of SVG ! </textPath>code>
</text>
<text>
<textPath xlink:href="#pathQ"> Welcome to the world of SVG ! Welcome to the world of SVG ! </textPath>code>
</text>
</svg>
六、超链接
和 HTML 一样，超链接可以使用 标签实现。
在 SVG 里，链接要放在 xlink:href 属性里。
如果希望鼠标放到链接上出现提示信息，可以在 xlink:title 属性里编写提示信息。
如需在新窗口打开链接，可以设置 target=“_blank” 。不设置的话就在当前窗口打开
<code><svg width="400" height="400" style="border: 1px solid red;">code>
<a xlink:href="../imgs/1.jpg" xlink:title="想到高兴的事">code>
<text x="20" y="20">快乐</text>code>
</a>
</svg>
七、图片
在 SVG 中可以使用 标签加载图片，包括位图。
是使用 xlink:href 属性获取图片的
<code><svg width="400" height="400" style="border: 1px solid red;">code>
<image xlink:href="./img.jpg"></image>code>
</svg>
有问题：会在地址前自动加上 file:///，在我电脑上正常，公司电脑不行，这是为什么呢
八、渐变
渐变都分为两种渐变：线性渐变和径向渐变
但需要注意的是这里我们需要接触两个新的标签：
defs标签用来定义渐变stop标签用来定义渐变的颜色坡度，具有三个属性：offset定义渐变开始和结束的位置、stop-color（定义颜色）和stop-opacity（定义透明度）
参数：x1、y1定义线性渐变的起点， x2、y2定义渐变的终点。仅仅是控制渐变的方向
1、线性渐变
<svg width="300" height="300">code>
<defs>
<linearGradient id="linearGradient" x1="0" y1="0" x2="100%" y2="0">code>
<stop offset="0%" stop-color="#189faa"></stop>code>
<stop offset="100%" stop-color="#fff382"></stop>code>
</linearGradient>
<linearGradient id="linearGradient1" x1="0" y1="0" x2="0%" y2="100%">code>
<stop offset="0%" stop-color="#189faa"></stop>code>
<stop offset="100%" stop-color="#fff382"></stop>code>
</linearGradient>
</defs>
<ellipse cx="150" cy="100" rx="100" ry="50" fill="url(#linearGradient)"></ellipse>code>
<ellipse cx="150" cy="220" rx="100" ry="50" fill="url(#linearGradient1)"></ellipse>code>
</svg>
2、径向渐变
径向渐变（radialGradient）其实就是以一个点做放射性的渐变。
参数： cx、cy、r分别为圆的坐标和半径，也就是渐变的范围，fx、fy定义渐变的中心点，也叫渐变的焦点。
<code><svg width="500" height="400">code>
<defs>
<radialGradient id="radialGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">code>
<stop offset="0%" stop-color="rgb(255, 255, 0)" />code>
<stop offset="100%" stop-color="rgb(255, 0, 0)" />code>
</radialGradient>
<radialGradient id="radialGradient1" cx="50%" cy="50%" r="50%" fx="50%" fy="0%">code>
<stop offset="0%" stop-color="rgb(255, 255, 0)" />code>
<stop offset="100%" stop-color="rgb(255, 0, 0)" />code>
</radialGradient>
<radialGradient id="radialGradient2" cx="50%" cy="50%" r="50%" fx="0%" fy="50%">code>
<stop offset="0%" stop-color="rgb(255, 255, 0)" />code>
<stop offset="100%" stop-color="rgb(255, 0, 0)" />code>
</radialGradient>
</defs>
<ellipse cx="100" cy="100" rx="100" ry="50" fill="url(#radialGradient)" />code>
<ellipse cx="100" cy="210" rx="100" ry="50" fill="url(#radialGradient1)" />code>
<ellipse cx="100" cy="320" rx="100" ry="50" fill="url(#radialGradient2)" />code>
</svg>
不管是线性渐变还是径向渐变，他们不仅可以用于图形还是用于文字
<code><svg width="500" height="400">code>
<defs>
<linearGradient id="linearGradient" x1="0" y1="0" x2="100%" y2="0">code>
<stop offset="0%" stop-color="rgb(255,255,0)" />code>
<stop offset="100%" stop-color="rgb(255,0,0)" />code>
</linearGradient>
<radialGradient id="radialGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="100%">code>
<stop offset="0%" stop-color="rgb(255, 255, 0)" />code>
<stop offset="100%" stop-color="rgb(255, 0, 0)" />code>
</radialGradient>
</defs>
<text fill="url(#linearGradient)" font-size="30" font-family="Verdana" x="50" y="100">我是一个小苹果</text>code>
<text fill="url(#radialGradient)" font-size="30" font-family="Verdana" x="50" y="200">我是一个小苹果</text>code>
</svg>
九、裁剪和蒙版
1、裁剪
裁剪的功能主要是使用clipPath标签定义一条裁剪路径，然后用来裁剪掉元素的部分内容。且任何透明度的效果都是无效的，它只能要么裁剪掉要么不裁剪。
<code><svg width="300" height="300">code>
<defs>
<clipPath id="clipPath">code>
<path d="M10 50 A50 50 0 0 1 100 50 A50 50 0 0 1 190 50 Q210 100 100 200 Q-5 100 10 50 Z" />code>
</clipPath>
</defs>
<rect x="0" y="0" width="200" height="200" fill="#f00" clip-path="url(#clipPath)" />code>
</svg>
2、蒙版
蒙层的功能主要实现标签就是mask标签，他的功能和名字正好相反，他不是用来遮住元素的部分内容，而是用来显示元素中mask标签遮住的内容。 他和clipPath标签不同的是他允许使用透明度（透明度为0则无蒙层效果）和灰度值遮罩计算得的软边缘
<code><svg width="300" height="300">code>
<defs>
<mask id="Mask">code>
<path d="M10 50 A50 50 0 0 1 100 50 A50 50 0 0 1 190 50 Q210 100 100 200 Q-5 100 10 50 Z"code>
fill="#fff" fill-opacity="0.5" />code>
</mask>
</defs>
<rect x="0" y="0" width="200" height="200" fill="#f00" mask="url(#Mask)" />code>
</svg>
十、动画 （核心）
1、基础动画
1）translate（平移）
语法：transform=“translate(x, y)”
参数：x为X轴上的平移距离，y为Y轴上的平移距离
<code><svg width="300" height="300">code>
<rect x="10" y="10" width="50" height="50" fill="#189faa"></rect>code>
<rect x="10" y="10" width="50" height="50" fill="#189faa" transform="translate(50, 50)"></rect>code>
<rect x="10" y="10" width="50" height="50" fill="#189faa" transform="translate(100, 100)"></rect>code>
</svg>
2）scale（缩放）
语法：transform=“scale(x, y)”
参数：x为X轴上的缩放大小，y为Y轴上的缩放大小，当两个值一样时，写一个值就可以。
<code><svg width="500" height="500">code>
<rect x="0" y="0" width="100" height="100" fill="#ff770f" />code>
<rect x="0" y="200" width="100" height="100" fill="#7e9178" transform="scale(0.5)" />code>
<rect x="0" y="100" width="100" height="100" fill="#183c78" transform="scale(1.5)" />code>
<rect x="200" y="100" width="100" height="100" fill="#cccccc" transform="scale(1, 0.5)" />code>
</svg>
3) rotate（旋转）
语法：transform=“rotate(deg)”
参数：deg为旋转的角度，45度就写45度。
<code><svg width="500" height="500">code>
<rect x="200" y="0" width="100" height="100" fill="#ff770f"/>code>
<rect x="200" y="0" width="100" height="100" fill="#cccccc" transform="rotate(20)"/>code>
<rect x="200" y="0" width="100" height="100" fill="#7e9178" transform="rotate(40)"/>code>
<rect x="200" y="0" width="100" height="100" fill="#183c78" transform="rotate(60)"/>code>
</svg>
是不是觉得效果和我们想想中的不一样？我就只想旋转，为什么感觉还发生了位移呢？
其实这是因为元素的旋转中心点是（0, 0）。如果我们想要只是选中而不位移，那么就需要把旋转的中心点设置在元素的中心点。
上面橙色方块的中心点经过计算可知 （250， 50）
通过 transform-origin 设置中心点
<code><svg width="500" height="500">code>
<rect x="200" y="0" width="100" height="100" fill="#ff770f" />code>
<rect x="200" y="0" width="100" height="100" fill="#cccccc" transform-origin="250 50" transform="rotate(20)" />code>
<rect x="200" y="0" width="100" height="100" fill="#7e9178" transform-origin="250 50" transform="rotate(40)" />code>
<rect x="200" y="0" width="100" height="100" fill="#183c78" transform-origin="250 50" transform="rotate(60)" />code>
</svg>
4) skew（倾斜）
语法：transform=“skewX(x) skewY(y)”
参数：x为X轴上的倾斜度，y为Y轴上的倾斜度。
在SVG中skew属性需要分开设置，x轴设置为skewX，y轴设置为skewY，不能合并起来用，写成 skew(x, y) 是不生效的。
<code><svg width="500" height="500">code>
<rect x="0" y="0" width="100" height="100" fill="#ff770f" />code>
<rect x="50" y="100" width="100" height="100" fill="#cccccc" transform="skewX(10)" />code>
<rect x="50" y="200" width="100" height="100" fill="#7e9178" transform="skewY(20)" />code>
<rect x="100" y="300" width="100" height="100" fill="#183c78" transform="skewX(10) skewY(20)" />code>
</svg>
2、js动画
SVG不能动态的修改动画内容
所以考虑用js实现
<code><svg width="300" height="300">code>
<rect id="rect" x="0" y="0" width="50" height="50" fill="#189faa"></rect>code>
</svg>
<script>
let dom = document.getElementById('rect')
let x = 0
let y = 1
let temp = setInterval(() => {
if (x < 300 && y < 300) {
x++
y++
dom.setAttribute('transform', `translate(${ x}, ${ y})`)
} else {
dom.setAttribute('transform', `translate(0, 0)`)
x = 0
y = 0
}
}, 10)
</script>
3、css动画
结合CSS来尝试做一下svg的线条动画。这里我们需要用上三个属性：分别是 stroke、stroke-dasharray、stroke-dashoffset。
<code><head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">code>
<style>
svg {
display: block;
margin: 50px auto;
}
#line {
stroke-dasharray: 500;
stroke-dashoffset: 500;
animation: move 2s linear infinite;
}
@keyframes move {
to {
stroke-dashoffset: 0;
}
}
</style>
</head>
<body>
<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg" version="1.1">code>
<line id="line" x1="0" x2="500" y1="0" y2="0" stroke="orange" stroke-width="10" />code>
</svg>
</body>
4、GreenSock 动画平台
https://www.tweenmax.com.cn/api/timelinemax
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。