svg根本使用

去皮卡多  金牌会员 | 2024-12-23 17:52:38 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 909|帖子 909|积分 2727

简介：

1、媒介：



  • 位图：放大会失真图像边缘有锯齿；是由像素点组成；前端的 Canvas 就是位图效果。
  • 矢量图：放大不会失真；使用 XML 形貌图形。



  • 对于初学 SVG 的前端来说，可以简朴的明白为 “SVG 是一套新标签”。所以可以使用 CSS 来设置样式，也可以使用 JS 对 SVG 举行操作。
  • 在不设置宽高的情况下，默以为300 * 150，当内部元素大于300 * 150时，大于部分会被隐藏
2、viewBox 属性界说了SVG中可以显示的区域。

语法：viewBox=“x y w h” x、y为起始点，w、h为显示区域的宽高。
示例：
  1. <svg width="300" height="300" viewBox="0 0 100 100">
  2.   <circle cx="100" cy="100" r="100" />
  3. </svg>
复制代码

为什么不是一个100巨细的圆显示在画布上呢？
viewBox界说了一个：从（0, 0）点开始，宽高为100 * 100的显示区域。而这个100 * 100的显示区域会放到300 * 300(svg宽高)的SVG中去显示，整体就放大了3倍
3、version

version属性用于指明SVG的版本，也就是指明SVG文档应该遵照的规范。version属性纯粹就是一个说明，对渲染或处理没有任何影响。且现在只有1.0 和 1.1这两个版本。
  1. <svg version="1.1">
  2.   // ...
  3. </svg>
复制代码
4、xmlns和xmlns:xlink


5、用     创建组合对象  

两种方法可以使我们的图标随时可用：将它们转换为组合，或转换为模板。我们将把前面的一半图标转换成组合，然后把剩下的一半变成模板，这样我们就可以说明他们之间的区别
要把我们的一个图标转换成一个组合，我们要做的就是用标签   来包裹它。为了使这个组合可用，我们还需要给它一个唯一的ID。
  1. <g id="leftalign">
  2.     <!-- 左对齐图标 -->
  3.     <line x1="3" y1="3" x2="48" y2="3"></line>
  4.     <line x1="3" y1="19" x2="65" y2="19"></line>
  5.     <line x1="3" y1="35" x2="48" y2="35"></line>
  6.     <line x1="3" y1="51" x2="65" y2="51"></line>
  7. </g>
复制代码
6、使用     来放置组合  

在     元素内部我们现在有1个图标被界说成组合，我们准备在 SVG 中使用它们。为了使用它们，我们需要做的就是添加一个       元素（确保在         元素以外且之后的地方添加它），并设置一个 href 属性指向想要的谁人图标的 ID。         
  1. <use href="#leftalign" x="100" y="100"></use>
复制代码
7、使用 symbols 创建模板对象

除了组合之外，你也可以使用模板来界说你的图标
模板几乎和组合一样，但是你可以得到额外的设置来控制视口（viewbox）和长宽比。
viewBox的属性 让我们可以界说每个模板的可见部分应该是什么。属性4个值。前两个界说图标的左上角，第三和第四分别界说它的宽度和高度
  1. <symbol id="alert" viewBox="0 0 86 86">
  2.     <!-- 警示图标 -->
  3.     <ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>
  4.     <ellipse style="fill:black;" cx="43" cy="65" rx="5" ry="5"></ellipse>
  5.     <line style="stroke-width: 8;" x1="43" y1="19" x2="43" y2="48"></line>
  6. </symbol>
复制代码
8、使用     来放置模板  

我们可以像使用我们的组合一样使用我们的模板图标。不外我们也会提供已经设好了宽高属性为 100px 的图标。
试着给使用基于组合图标的     元素上添加宽高的属性。发现没什么变化。这是由于浏览器依赖的是 viewBox 的值（组合没有这个值）来确定如何缩放图标。  
一、图形标签

1、矩形

矩形使用     标签，默认填充色是玄色，当只设置宽高时，渲染出来的矩形就是玄色的矩形。   
矩形底子属性  


  • x: 左上角x轴坐标 偏移距离
  • y: 左上角y轴坐标
  • width: 宽度
  • height: 高度
  • rx: 圆角，x轴的半径
  • ry: 圆角，y轴的半径
  1. <!DOCTYPE html>
  2. <svg width="500" height="300" style="border: 1px solid red; margin-left: 100px;">
  3.   <rect x="50" y="50" width="200" height="150" rx="50" ry="50">
  4.   </rect>
  5. </svg>
复制代码
rx\ry 明白，画一个椭圆来切调不相交的部分

2、圆形

圆形使用     标签，底子属性有：  


  • cx: 圆心在x轴的坐标
  • cy: 圆心在y轴的坐标
  • r: 半径
  1. <!DOCTYPE html>
  2. <svg width="500" height="300" style="border: 1px solid red; margin-left: 100px;">
  3.   <circle cx="350" cy="150" r="20"></circle>
  4. </svg>
复制代码

3、椭圆 ellipse

椭圆使用     标签，底子属性有：  


  • cx: 圆心在x轴的坐标
  • cy: 圆心在y轴的坐标
  • rx: x轴的半径
  • ry: y轴的半径
  1. <!DOCTYPE html>
  2. <svg width="500" height="300" style="border: 1px solid red; margin-left: 100px;">
  3.   <ellipse cx="450" cy="150" rx="40" ry="30"></ellipse>
  4. </svg>
复制代码

4、直线 line

直线使用     标签，底子属性有：  


  • x1: 起始点x坐标
  • y1: 起始点y坐标
  • x2: 结束点x坐标
  • y2: 结束点y坐标
  • stroke: 描边颜色
  1. <svg width="400" height="300" style="border: 1px solid red; margin: 10px">
  2.   <line x1="10" y1="10" x2="10" y2="50" stroke="#000"></line>
  3. </svg>
复制代码

5、折线polyline

使用     可以绘制折线，底子属性有：  


  • points: 点集
  • stroke: 描边颜色
  • fill: 填充颜色
  1. <svg width="400" height="300" style="border: 1px solid red; margin: 10px">
  2.   <polyline points="20 10, 100 10, 100 40" stroke="red" fill="none"></polyline>
  3.   <polyline points="20 10, 100 10, 100 40" stroke="red" fill="red"></polyline>
  4. </svg>
复制代码

6、多边形 polygon

多边形使用     标签，底子属性和       差不多：     


  • points: 点集
  • stroke: 描边颜色
  • fill: 填充颜色
      会自动闭合（自动将起始点和结束点链接起来）。  
  1. <svg width="400" height="300" style="border: 1px solid red; margin: 10px">
  2.   <polygon points="10 200, 200 80, 230 230" ></polygon>
  3. </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

  1. <svg width="400" height="300" style="border: 1px solid red; margin: 10px">
  2.   <path d="M 300 100 L 300 130 L 350 160" stroke="blue" fill="none"></path>
  3.   <path d="M 300 200 L 300 230 L 350 260 Z" stroke="green" fill="none"></path>
  4.   
  5.         <!--  同上，用 V 省略了 水平坐标 -->
  6.   <path d="M 300 200 V 230 L 350 260 Z" stroke="green" fill="none"></path>
  8.         <!--  同上 全L 可直接省略  -->
  9.   <path d="M 300 200 300 230 350 260 Z" stroke="green" fill="none"></path>
  10. </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 决定的。
  1. <path d="M 300 200 A 50 50 0 0 1 400 200 Z" stroke="green" fill="none"></path>
复制代码

三、设置样式的方式和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 。
  1. <svg width="400" height="400" style="border: 1px solid red;">
  2.   <rect
  3.     x="100"
  4.     y="100"
  5.     width="200"
  6.     height="100"
  7.     fill="red"
  8.     fill-opacity="0.2"
  9.   />
  10. </svg>
复制代码

3、描边stroke

（1）描边宽度 stroke-width

  1. <svg width="400" height="400" style="border: 1px solid red;">
  2.   <rect
  3.     x="100"
  4.     y="100"
  5.     width="200"
  6.     height="100"
  7.     fill="none"
  8.     stroke="blue"
  9.     stroke-width="10"
  10.   />
  11. </svg>
复制代码

（2）描边的透明度stroke-opacity

  1. <svg width="400" height="400" style="border: 1px solid red;">
  2.   <rect
  3.     x="100"
  4.     y="100"
  5.     width="200"
  6.     height="100"
  7.     fill="none"
  8.     stroke="blue"
  9.     stroke-opacity="0.3"
  10.   />
  11. </svg>
复制代码

（3）描边虚线 stroke-dasharray

stroke-dasharray 接收一串数字，这串数字可以用来代表 线的长度和清闲的长度，数字之间用逗号或者空格分隔。
建议传入偶数个数字。但假如你传入了奇数个数字，SVG 会将这串数字重复一遍，使它的数目变成 偶数个 。
  1. <svg>
  2.   <line x1="30" y1="70" x2="300" y2="70" stroke="blue" stroke-width="5"
  3.     stroke-dasharray="20 10" />
  4. </svg>
复制代码

（4）虚线偏移量 stroke-dashoffset

接收一个数值类型的值
  1. <svg>
  2.   <line x1="0" y1="30" x2="300" y2="30" stroke="blue" stroke-width="5"
  3.     stroke-dasharray="20 10" />
  4.   <line x1="0" y1="70" x2="300" y2="70" stroke="blue" stroke-width="5"
  5.     stroke-dasharray="20 10" stroke-dashoffset="20" />
  6. </svg>
复制代码

（5）线帽 stroke-linecap

线的起始点和结束点的样式，用 stroke-linecap 属性可以设置线帽样式。
线帽有3个值：


  • butt: 平头（默认值）
  • round: 圆头
  • square: 方头
默认的linecap是占用线条的长度的，所以在一个svg画布上需要预留线帽的空间。
  1. <svg width="300" height="300">
  2.   <!-- 默认 平头 -->
  3.   <line x1="5" y1="5" x2="200" y2="5" stroke="red" stroke-width="10"
  4.     style="stroke-linecap: butt;" />
  5.   <!-- 圆头 -->
  6.   <path stroke-linecap="round" stroke="orange" stroke-width="10" d="M5 20 L200 20" />
  7.   <line x1="5" y1="40" x2="200" y2="40" stroke="blue" stroke-width="10"
  8.     stroke-linecap="round" />
  9.   <!-- 方头 -->
  10.   <line x1="5" y1="60" x2="200" y2="60" stroke="green" stroke-width="10"
  11.     stroke-linecap="square" />
  12. </svg>
复制代码

（6）拐角 stroke-linejoin

拐角就是折线的交接点，可以使用 stroke-linejoin 设置，它接收以下属性：


  • miter: 尖角（默认）
  • round: 圆角
  • bevel: 平角
  1. <svg width="260" height="260">
  2.   <!-- 尖角 默认 -->
  3.   <path d="M10 10 200 10 200 200" stroke-width="10" stroke="red"
  4.     stroke-linejoin="miter" fill="none"></path>
  5.   <!-- 圆角 -->
  6.   <path d="M10 30 180 30 180 200" stroke-width="10" stroke="orange"
  7.     stroke-linejoin="round" fill="none"></path>
  8.   <!-- 平角 -->
  9.   <path d="M10 50 160 50 160 200" stroke-width="10" stroke="blue"
  10.     stroke-linejoin="bevel" fill="none"></path>
  11. </svg>
复制代码

（7）消除锯齿 shape-rendering

假如你觉得 SVG 在浏览器显示出来的图像有点模糊，那大概是开启了 反锯齿 功能，可以通过 CSS 属性关闭该功能。
  1. shape-rendering: crispEdges;
复制代码
将该属性设置到对应的 svg 元素上，就会关闭反锯齿功能，突显看起来就会清晰很对，但在某些情况关闭了该功能会让图像看起来有点毛躁的感觉。
假如想开启反锯齿功能，可以这样设置：shape-rendering: geometricPrecision;


  • 示例 （ 没有看出来效果 ）
  1. <svg>
  2.   <rect x="10" y="10" width="100" height="100" fill="orange"
  3.     style="shape-rendering: crispEdges"></rect>
  4. </svg>
复制代码

五、文本元素 text

使用     标签渲染文本。文本是有 **“基线”。**和 Canvas 一样，SVG 的文本对齐方式是以第一个字基线的左下角为基准  
  1. <svg width="400" height="400" style="border: 1px solid red;">
  2.   <text>呀呼嘿</text>
  3. </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: 删除线
  1. <svg width="400" height="400" style="border: 1px solid red;">
  2.   <!-- 默认 -->
  3.   <text
  4.     y="30"
  5.     font-size="30"
  6.     text-decoration="none"
  7.   >
  8.     呀呼嘿
  9.   </text>
  11.   <!-- 上划线 -->
  12.   <text
  13.     y="100"
  14.     font-size="30"
  15.     text-decoration="overline"
  16.   >
  17.     呀呼嘿
  18.   </text>
  20.   <!-- 删除线 -->
  21.   <text
  22.     y="170"
  23.     font-size="30"
  24.     text-decoration="line-through"
  25.   >
  26.     呀呼嘿
  27.   </text>
  29.   <!-- 下划线 -->
  30.   <text
  31.     y="240"
  32.     font-size="30"
  33.     text-decoration="underline"
  34.   >
  35.     呀呼嘿
  36.   </text>
  37. </svg>
复制代码

4、文本对齐

（1）程度对齐方式 text-anchor

可以通过 text-anchor 属性设置文本程度对齐方式。
假如本子是从左向右誊写，那这几个参数的意思就是：


  • start: 左对齐
  • middle: 居中对齐
  • end: 右对齐
  1. <svg width="200" height="200" style="border: 1px solid red;">
  2.   <!-- 参考线 -->
  3.   <path d="M 100 0 100 200" stroke="red"></path>
  4.   <text x="100" y="16" text-anchor="start">你好</text>
  5.   <text x="100" y="36" text-anchor="middle">你好</text>
  6.   <text x="100" y="56" text-anchor="end">你好</text>
  7. </svg>
复制代码

（2）多行文可以使用本     标签辅助实现  

  1. <svg width="400" height="400" style="border: 1px solid red;">
  2.   <text fill="blue">
  3.     <tspan x="10" y="30" fill="red">雷猴</tspan>
  4.     <tspan x="10" y="60">鲨鱼辣椒</tspan>
  5.     <tspan x="10" y="90">蟑螂恶霸</tspan>
  6.     <tspan x="10" y="120">蝎子莱莱</tspan>
  7.   </text>
  8. </svg>
复制代码

     要放在       里，而且会继承         设置的样式。     
假如在           里设置的样式和             的样式有冲突，末了会使用               的样式。                           
（3）垂直对齐方式 dominant-baseline

可以通过 dominant-baseline 属性设置文本垂直对齐方式


  • auto: 默认的对齐方式，保持与父元素相同的配置。
  • text-after-edge: 在基线上方
  • middle: 居中基线
  • text-before-edge: 在基线下方
  1. <svg width="400" height="400" style="border: 1px solid red;">
  2.   <!-- 参考线 -->
  3.   <path d="M 0 200 400 200" stroke="red"></path>
  5.   <!-- 默认 -->
  6.   <text
  7.     x="20"
  8.     y="200"
  9.     dominant-baseline="auto"
  10.   >
  11.     雷猴
  12.   </text>
  14.   <!-- 在基线上方 -->
  15.   <text
  16.     x="80"
  17.     y="200"
  18.     dominant-baseline="text-after-edge"
  19.   >
  20.     雷猴
  21.   </text>
  23.   <!-- 居中基线 -->
  24.   <text
  25.     x="160"
  26.     y="200"
  27.     dominant-baseline="middle"
  28.   >
  29.     雷猴
  30.   </text>
  32.   <!-- 在基线下方 -->
  33.   <text
  34.     x="240"
  35.     y="200"
  36.     dominant-baseline="text-before-edge"
  37.   >
  38.     雷猴
  39.   </text>
  40. </svg>
复制代码

（4）纵向文字 writing-mode

将 writing-mode 设置成 tb 就可以让文字纵向排列。
需要注意英文和中文的文字角度！
  1. <svg width="400" height="400" style="border: 1px solid red;">
  2.   <text x="20" y="20" writing-mode="tb">Hello World!</text>
  3.   <text x="100" y="20" writing-mode="tb">鲨鱼辣椒</text>
  4. </svg>
复制代码
5、属性

(1) x和y属性决定了文字的绘制起点。

x和y的值可以是一个数列。假如设置为了一个数列则会应用到每一个字符上
  1. <svg width="300" height="300">
  2.   <text
  3.     x="30 60 90 120 150 180 210 240 270"
  4.     y="60 90 120 150 180 150 120 90 60"
  5.     fill="#f00"
  6.     stroke="#0f0"
  7.     font-size="50"
  8.     font-weight="bold" >
  9.     Hello Svg !
  10.   </text>
  11. </svg>
复制代码

(2) dx和dy

dx和dy属性与x和y属性不同的是，x和y属性是绝对的坐标，而dx和dy属性是相对于当前位置的偏移量。
参数也可以是一个数列。假如设置为了一个数列则会应用到每一个字符上
  1. <svg width="500" height="500">
  2.   <text
  3.     dx="50 10 10 10 10 10 10 10 10"
  4.     dy="50 20 -20 20 -20 20 -20 20 -20"
  5.     fill="#f00"
  6.     stroke="#0f0"
  7.     font-size="50"
  8.     font-weight="bold" >
  9.     Hello Svg !
  10.   </text>
  11. </svg>
复制代码

(3) rotate属性

rotate属性可以把文字旋转一个角度。也可以是数列同上
  1. <svg width="500" height="500">
  2.   <text
  3.     x="50"
  4.     y="50"
  5.     rotate="10"
  6.     fill="#f00"
  7.     stroke="#0f0"
  8.     font-size="50"
  9.     font-weight="bold" >
  10.     Hello Svg !
  11.   </text>
  12. </svg>
复制代码

(4) textLength

textLength属性给定了一个字符串的计算长度。在文字的长度和textLength属性给定的长度不一致的情况下渲染引擎会精细调整字型的位置。
  1. <svg width="550" height="500">
  2.   <text x="50" y="50" textLength="150" fill="#f00" stroke="#0f0" font-size="50"font-weight="bold" >
  3.     Hello Svg !
  4.   </text>
  5.   <text  x="50" y="100" textLength="500" fill="#f00" stroke="#0f0" font-size="50" font-weight="bold" >
  6.     Hello Svg !
  7.   </text>
  8. </svg>
复制代码

(5) lengthAdjust

lengthadjust属性可以控制文本以什么方式伸展到由_textLength_属性界说的长度。


  • spacing：只拉伸或压缩间距（文字不变形）
  • spacingAndGlyphs：同时拉伸或压缩间距和文字本身（文字变形）
  1. <svg width="500" height="500">
  2.   <text  x="50" y="50" textLength="200" lengthadjust="spacing" fill="#f00" stroke="#0f0" font-size="50" font-weight="bold" >
  3.     Welcome to the world of svg !
  4.   </text>
  5.   <text  x="50" y="100" textLength="200" lengthadjust="spacingAndGlyphs" fill="#f00" stroke="#0f0" font-size="50" font-weight="bold" >
  6.     Welcome to the world of svg !
  7.   </text>
  8.   <text  x="50" y="150" textLength="400" lengthadjust="spacing" fill="#f00" stroke="#0f0" font-size="50" font-weight="bold" >
  9.     Hi svg !
  10.   </text>
  11.   <text  x="50" y="200" textLength="400" lengthadjust="spacingAndGlyphs" fill="#f00" stroke="#0f0" font-size="50" font-weight="bold" >
  12.     Hi svg !
  13.   </text>
  14. </svg>
复制代码

(6) fill和stroke

填充和轮廓也都可以应用于文字
  1. <svg width="300" height="300">
  2.   <text x="50" y="50" fill="#f00" stroke="#0f0" font-weight="bold">Hello Svg !</text>
  3. </svg>
复制代码

重要 (7) textPath 非常牛

textPath标签可以使用它的xlink:href属性取得一个任意路径，而且可以让字符顺着路径渲染。
  1. <svg width="600" height="500">
  2.   <path id="pathM" d="M 50 50 100 100 200 50 300 100" fill="none" />
  3.   <path id="pathQ" d="M50 100 Q 175 200 300 100 T 600 100" fill="none" />
  4.   <text>
  5.     <textPath xlink:href="#pathM"> Welcome to the world of SVG ! </textPath>
  6.   </text>
  7.   <text>
  8.     <textPath xlink:href="#pathQ"> Welcome to the world of SVG ! Welcome to the world of SVG ! </textPath>
  9.   </text>
  10. </svg>
复制代码

六、超链接

和 HTML 一样，超链接可以使用  标签实现。
在 SVG 里，链接要放在 xlink:href 属性里。
假如盼望鼠标放到链接上出现提示信息，可以在 xlink:title 属性里编写提示信息。


  • 如需在新窗口打开链接，可以设置 target=“_blank” 。不设置的话就在当前窗口打开
  1. <svg width="400" height="400" style="border: 1px solid red;">
  2.   <a xlink:href="../imgs/1.jpg" xlink:title="想到高兴的事">
  3.     <text x="20" y="20">快乐</text>
  4.   </a>
  5. </svg>
复制代码

七、图片

在 SVG 中可以使用  标签加载图片，包罗位图。
  是使用 xlink:href 属性获取图片的
  1. <svg width="400" height="400" style="border: 1px solid red;">
  2.   <image xlink:href="./img.jpg"></image>
  3. </svg>
复制代码
有题目：会在所在前自动加上 file:///，在我电脑上正常，公司电脑不可，这是为什么呢
八、渐变

渐变都分为两种渐变：线性渐变和径向渐变
但需要注意的是这里我们需要接触两个新的标签：


  • defs标签用来界说渐变
  • stop标签用来界说渐变的颜色坡度，具有三个属性：offset界说渐变开始和结束的位置、stop-color（界说颜色）和stop-opacity（界说透明度）
参数：x1、y1界说线性渐变的起点， x2、y2界说渐变的尽头。仅仅是控制渐变的方向
1、线性渐变

  1. <svg width="300" height="300">
  2.   <defs>
  3.     <linearGradient id="linearGradient" x1="0" y1="0" x2="100%" y2="0">
  4.       <stop offset="0%" stop-color="#189faa"></stop>
  5.       <stop offset="100%" stop-color="#fff382"></stop>
  6.     </linearGradient>
  7.     <linearGradient id="linearGradient1" x1="0" y1="0" x2="0%" y2="100%">
  8.       <stop offset="0%" stop-color="#189faa"></stop>
  9.       <stop offset="100%" stop-color="#fff382"></stop>
  10.     </linearGradient>
  11.   </defs>
  12.   <ellipse cx="150" cy="100" rx="100" ry="50" fill="url(#linearGradient)"></ellipse>
  13.   <ellipse cx="150" cy="220" rx="100" ry="50" fill="url(#linearGradient1)"></ellipse>
  14. </svg>
复制代码

2、径向渐变

径向渐变（radialGradient）实在就是以一个点做放射性的渐变。
参数： cx、cy、r分别为圆的坐标和半径，也就是渐变的范围，fx、fy界说渐变的中心点，也叫渐变的焦点。
  1. <svg width="500" height="400">
  2.   <defs>
  3.     <radialGradient id="radialGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
  4.       <stop offset="0%" stop-color="rgb(255, 255, 0)" />
  5.       <stop offset="100%" stop-color="rgb(255, 0, 0)" />
  6.     </radialGradient>
  7.     <radialGradient id="radialGradient1" cx="50%" cy="50%" r="50%" fx="50%" fy="0%">
  8.       <stop offset="0%" stop-color="rgb(255, 255, 0)" />
  9.       <stop offset="100%" stop-color="rgb(255, 0, 0)" />
  10.     </radialGradient>
  11.     <radialGradient id="radialGradient2" cx="50%" cy="50%" r="50%" fx="0%" fy="50%">
  12.       <stop offset="0%" stop-color="rgb(255, 255, 0)" />
  13.       <stop offset="100%" stop-color="rgb(255, 0, 0)" />
  14.     </radialGradient>
  15.   </defs>
  16.   <ellipse cx="100" cy="100" rx="100" ry="50" fill="url(#radialGradient)" />
  17.   <ellipse cx="100" cy="210" rx="100" ry="50" fill="url(#radialGradient1)" />
  18.   <ellipse cx="100" cy="320" rx="100" ry="50" fill="url(#radialGradient2)" />
  19. </svg>
复制代码

不管是线性渐变还是径向渐变，他们不仅可以用于图形还是用于文字
  1. <svg width="500" height="400">
  2.     <defs>
  3.       <linearGradient id="linearGradient" x1="0" y1="0" x2="100%" y2="0">
  4.         <stop offset="0%" stop-color="rgb(255,255,0)" />
  5.         <stop offset="100%" stop-color="rgb(255,0,0)" />
  6.       </linearGradient>
  7.       <radialGradient id="radialGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="100%">
  8.         <stop offset="0%" stop-color="rgb(255, 255, 0)" />
  9.         <stop offset="100%" stop-color="rgb(255, 0, 0)" />
  10.       </radialGradient>
  11.     </defs>
  12.     <text fill="url(#linearGradient)" font-size="30" font-family="Verdana" x="50" y="100">我是一个小苹果</text>
  13.     <text fill="url(#radialGradient)" font-size="30" font-family="Verdana" x="50" y="200">我是一个小苹果</text>
  14.   </svg>
复制代码

九、裁剪和蒙版

1、裁剪

裁剪的功能主要是使用clipPath标签界说一条裁剪路径，然后用来裁剪掉元素的部分内容。且任何透明度的效果都是无效的，它只能要么裁剪掉要么不裁剪。
  1. <svg width="300" height="300">
  2.     <defs>
  3.       <clipPath id="clipPath">
  4.         <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" />
  5.       </clipPath>
  6.     </defs>
  9.     <rect x="0" y="0" width="200" height="200" fill="#f00" clip-path="url(#clipPath)" />
  10.   </svg>
复制代码

2、蒙版

蒙层的功能主要实现标签就是mask标签，他的功能和名字恰好相反，他不是用来遮住元素的部分内容，而是用来显示元素中mask标签遮住的内容。 他和clipPath标签不同的是他答应使用透明度（透明度为0则无蒙层效果）和灰度值遮罩计算得的软边缘
  1. <svg width="300" height="300">
  2.   <defs>
  3.     <mask id="Mask">
  4.       <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"
  5.         fill="#fff" fill-opacity="0.5" />
  6.     </mask>       
  7.   </defs>
  8.   <rect x="0" y="0" width="200" height="200" fill="#f00" mask="url(#Mask)" />
  9. </svg>
复制代码

十、动画 （焦点）

1、底子动画

1）translate（平移）

语法：transform=“translate(x, y)”
参数：x为X轴上的平移距离，y为Y轴上的平移距离
  1. <svg width="300" height="300">
  2.   <rect x="10" y="10" width="50" height="50" fill="#189faa"></rect>
  3.   <rect x="10" y="10" width="50" height="50" fill="#189faa" transform="translate(50, 50)"></rect>
  4.   <rect x="10" y="10" width="50" height="50" fill="#189faa" transform="translate(100, 100)"></rect>
  5. </svg>
复制代码

2）scale（缩放）

语法：transform=“scale(x, y)”
参数：x为X轴上的缩放巨细，y为Y轴上的缩放巨细，当两个值一样时，写一个值就可以。
  1. <svg width="500" height="500">
  2.   <rect x="0" y="0" width="100" height="100" fill="#ff770f" />
  3.   <rect x="0" y="200" width="100" height="100" fill="#7e9178" transform="scale(0.5)" />
  4.   <rect x="0" y="100" width="100" height="100" fill="#183c78" transform="scale(1.5)" />
  5.   <rect x="200" y="100" width="100" height="100" fill="#cccccc" transform="scale(1, 0.5)" />
  6. </svg>
复制代码

3) rotate（旋转）

语法：transform=“rotate(deg)”
参数：deg为旋转的角度，45度就写45度。
  1. <svg width="500" height="500">
  2.   <rect x="200" y="0" width="100" height="100" fill="#ff770f"/>
  3.   <rect x="200" y="0" width="100" height="100" fill="#cccccc" transform="rotate(20)"/>
  4.   <rect x="200" y="0" width="100" height="100" fill="#7e9178" transform="rotate(40)"/>
  5.   <rect x="200" y="0" width="100" height="100" fill="#183c78"  transform="rotate(60)"/>
  6. </svg>
复制代码

是不是觉得效果和我们想想中的不一样？我就只想旋转，为什么感觉还发生了位移呢？
实在这是由于元素的旋转中心点是（0, 0）。假如我们想要只是选中而不位移，那么就需要把旋转的中心点设置在元素的中心点。
上面橙色方块的中心点经过计算可知 （250， 50）
通过 transform-origin 设置中心点
  1. <svg width="500" height="500">
  2.   <rect x="200" y="0" width="100" height="100" fill="#ff770f" />
  3.   <rect x="200" y="0" width="100" height="100" fill="#cccccc" transform-origin="250 50" transform="rotate(20)" />
  4.   <rect x="200" y="0" width="100" height="100" fill="#7e9178" transform-origin="250 50" transform="rotate(40)" />
  5.   <rect x="200" y="0" width="100" height="100" fill="#183c78" transform-origin="250 50" transform="rotate(60)" />
  6. </svg>
复制代码

4) skew（倾斜）

语法：transform=“skewX(x) skewY(y)”
参数：x为X轴上的倾斜度，y为Y轴上的倾斜度。
在SVG中skew属性需要分开设置，x轴设置为skewX，y轴设置为skewY，不能合并起来用，写成 skew(x, y) 是不见效的。
  1. <svg width="500" height="500">
  2.   <rect x="0" y="0" width="100" height="100" fill="#ff770f" />
  3.   <rect x="50" y="100" width="100" height="100" fill="#cccccc" transform="skewX(10)" />
  4.   <rect x="50" y="200" width="100" height="100" fill="#7e9178" transform="skewY(20)" />
  5.   <rect x="100" y="300" width="100" height="100" fill="#183c78" transform="skewX(10) skewY(20)" />
  6. </svg>
复制代码

2、js动画

SVG不能动态的修改动画内容
所以考虑用js实现
  1. <svg width="300" height="300">
  2.   <rect id="rect" x="0" y="0" width="50" height="50" fill="#189faa"></rect>
  3. </svg>
  6. <script>
  7.   let dom = document.getElementById('rect')
  8.   let x = 0
  9.   let y = 1
  12.   let temp = setInterval(() => {
  13.     if (x < 300 && y < 300) {
  14.       x++
  15.       y++
  16.       dom.setAttribute('transform', `translate(${x}, ${y})`)
  17.     } else {
  18.       dom.setAttribute('transform', `translate(0, 0)`)
  19.       x = 0
  20.       y = 0
  21.     }
  22.   }, 10)
  23.   
  24. </script>
复制代码

3、css动画

联合CSS来实验做一下svg的线条动画。这里我们需要用上三个属性：分别是 stroke、stroke-dasharray、stroke-dashoffset。
  1. <head>
  2.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  3.   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  4.   <style>
  5.     svg {
  6.       display: block;
  7.       margin: 50px auto;
  8.     }
  11.     #line {
  12.       stroke-dasharray: 500;
  13.       stroke-dashoffset: 500;
  14.       animation: move 2s linear infinite;
  15.     }
  18.     @keyframes move {
  19.       to {
  20.         stroke-dashoffset: 0;
  21.       }
  22.     }
  23.   </style>
  24. </head>
  27. <body>
  28.   <svg width="500" height="500" xmlns="http://www.w3.org/2000/svg" version="1.1">
  29.     <line id="line" x1="0" x2="500" y1="0" y2="0" stroke="orange" stroke-width="10" />
  30.   </svg>
  31. </body>
复制代码

4、GreenSock 动画平台

https://www.tweenmax.com.cn/api/timelinemax

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

去皮卡多

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表