SVG学习

最新推荐文章于 2024-05-25 14:18:20 发布

Harriet嘉

最新推荐文章于 2024-05-25 14:18:20 发布

阅读量566

点赞数 1

分类专栏：前端文章标签： html svg 前端

本文链接：https://blog.csdn.net/qq_38188485/article/details/129484665

版权

前端专栏收录该内容

27 篇文章 1 订阅

订阅专栏

SVG 有一些预定义的形状元素，可被开发者使用和操作：

w3c SVG 教程

菜鸟 SVG 实例 | 菜鸟教程

MDN SVG 教程 - SVG：可缩放矢量图形 | MDN

g元素可以把若干个基本形状编成一个组。

SVG 文件全局有效的规则是“后来居上”，越后面的元素越可见。

常用形状：

矩形
圆形
椭圆
线
折线
多边形
路径
文字

矩形 rect 例子：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
fill-opacity:0.1;stroke-opacity:0.9"/>

</svg>

代码解释：

rect 元素的 width 和 height 属性可定义矩形的高度和宽度
style 属性用来定义 CSS 属性
CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
CSS 的 stroke-width 属性定义矩形边框的宽度
CSS 的 stroke 属性定义矩形边框的颜色
rx 属性定义水平半径； ry默认跟rx一样的值可单独设置
x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）

y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px）
CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
CSS 的 stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1）

圆形 circle 例子：

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>

</svg>

代码解释：

cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy，圆的中心会被设置为 (0, 0)

r 属性定义圆的半径。

椭圆 ellipse 例子：

<svg width="100%" height="100%" version="1.1"
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 属性定义圆点的 x 坐标
cy 属性定义圆点的 y 坐标
rx 属性定义水平半径
ry 属性定义垂直半径

线条 line 例子：

<svg width="100%" height="100%" version="1.1"
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 属性在 x 轴定义线条的开始
y1 属性在 y 轴定义线条的开始
x2 属性在 x 轴定义线条的结束
y2 属性在 y 轴定义线条的结束

多边形 polygon 例子：

<svg width="100%" height="100%" version="1.1"
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="100%" height="100%" version="1.1"
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>

代码解释：

points 属性定义折线每个角的 x 和 y 坐标

路径 path 例子：

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<path d="M250 150 L150 350 L350 350 Z" />

</svg>

代码解释：

d - SVG：可缩放矢量图形 | MDN

下面的命令可用于路径数据：

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
Z = closepath

移动到：M、m

画线至：L、l、H、h、V、v

三次方贝塞尔曲线：C、c、S、s

二次方贝塞尔曲线：Q、q、T、t

椭圆曲线：A、a

封闭路径：Z、z

注释：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

椭圆曲线：

文本 text 例子：

//例子1
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVG</text>
</svg>

//例子2
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs>
    <path id="path1" d="M75,20 a1,1 0 0,0 100,0" />
  </defs>
  <text x="10" y="100" style="fill:red;">
    <textPath xlink:href="#path1">I love SVG I love SVG</textPath>
  </text>
</svg>

//例子3
// 元素可以安排任何分小组与<tspan> 元素的数量。
//每个<tspan> 元素可以包含不同的格式和位置。几行文本(与 <tspan> 元素):
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <text x="10" y="20" style="fill:red;">Several lines:
    <tspan x="10" y="45">First line</tspan>
    <tspan x="10" y="70">Second line</tspan>
  </text>
</svg>

代码解释：

x="列表的X -轴的位置。在文本中在第n个字符的位置在第n个x轴。如果后面存在额外的字符，耗尽他们最后一个字符之后放置的位置。 0是默认"

y="列表的Y轴位置。（参考x）0是默认"

text-anchor用于决定文本流方向 start | middle | end | inherit

transform 属性： rotate(30 20,40) 第一个参数30是角度； 20，40是旋转中心

下列每个属性可以被设置为一个 SVG 属性或者成为一个 CSS 声明：

font-family、font-style、font-weight、font-variant、font-stretch、font-size、font-size-adjust、kerning、letter-spacing、word-spacing和text-decoration。

tspan元素：

用来标记大块文本的子部分，它必须是一个text元素或别的tspan元素的子元素。

dx="在字符的长度列表中移动相对最后绘制标志符号的绝对位置。（参考x）"

dy="在字符的长度列表中移动相对最后绘制标志符号的绝对位置。（参考x）"

rotate="一个旋转的列表。第n个旋转是第n个字符。附加字符没有给出最后的旋转值"

textLength="SVG查看器将尝试显示文本之间的间距/或字形调整的文本目标长度。（默认：正常文本的长度）"

lengthAdjust="告诉查看器，如果指定长度就尝试进行调整用以呈现文本。这两个值是'spacing'和'spacingAndGlyphs'

tref元素：

允许引用已经定义的文本，高效地把它复制到当前位置。你可以使用xlink:href属性，把它指向一个元素，取得其文本内容。你可以独立于源样式化它、修改它的外观。

textPath元素：

利用它的xlink:href属性取得一个任意路径，把字符对齐到路径，于是字体会环绕路径、顺着路径走。

填充和边框

fill 填充属性

fil-opacity 透明度 0~1

stroke 边框属性

stroke-opacity 透明度 0~1

stroke-width 宽度

stroke-linecap 边框重点的形状 butt 90度垂直 | square 直角封闭 | round 圆角封闭

stroke-linejoin 描边线段连接 miter 默认连接处形成尖角 | round 圆角连接 | bevel 形成斜接

stroke-dasharray 虚线描边（数字必须用逗号分割空格会被忽略）

渐变

线性渐变 linearGradient 和径向渐变 radialGradient 必须给渐变内容指定一个id

为了让渐变能被重复使用，渐变内容需要定义在标签内部，而不是定义在形状上面

<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
      <linearGradient id="Gradient1">
        <stop class="stop1" offset="0%"/>
        <stop class="stop2" offset="50%"/>
        <stop class="stop3" offset="100%"/>
      </linearGradient>
      <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
        <stop offset="0%" stop-color="red"/>
        <stop offset="50%" stop-color="black" stop-opacity="0"/>
        <stop offset="100%" stop-color="blue"/>
      </linearGradient>
      <style type="text/css"><![CDATA[
        #rect1 { fill: url(#Gradient1); }
        .stop1 { stop-color: red; }
        .stop2 { stop-color: black; stop-opacity: 0; }
        .stop3 { stop-color: blue; }
      ]]></style>
  </defs>

  <rect id="rect1" x="10" y="10" rx="15" ry="15" width="100" height="100"/>
  <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)"/>

</svg>

线性渐变的stop节点通过指定位置的offset属性和stop-color属性来说明在渐变特定位置上是什么颜色，偏移量应该始终从0%（0）开始到100%（1）结束。

linearGradient 渐变方向可以通过两个点来控制 x1,x2,y1,y2 默认是水平方向

径向渐变是从一个点开始发散绘制渐变

<?xml version="1.0" standalone="no"?>
<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
      <radialGradient id="RadialGradient1">
        <stop offset="0%" stop-color="red"/>
        <stop offset="100%" stop-color="blue"/>
      </radialGradient>
      <radialGradient id="RadialGradient2" cx="0.25" cy="0.25" r="0.25">
        <stop offset="0%" stop-color="red"/>
        <stop offset="100%" stop-color="blue"/>
      </radialGradient>
  </defs>

  <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient1)"/>
  <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient2)"/>

</svg>

radialGradient 的也是通过两个stop节点来定义其边缘位置，第一个点定义了渐变结束所围绕的圆环，由一个中心点 cx, cy属性及半径r来定义。第二个点被称为焦点，由fx,fy属性定义，描述了渐变的中心（默认与中心点一致）。

spreadMethod属性控制渐变到达终点的行为 pad 默认 | reflect 渐变持续但反转颜色 | repeat 重复渐变

图案

patterns 也需要放在SVG文档的内部

pattern元素内部可以包含其它的基本形状。关于 pattern 容易混淆的事是，pattern 定义了一个单元系统以及他们的大小。上例中，我们在 pattern 元素上定义了width和height属性，用于描述在重复下一个图案之前应该跨过多远。

<?xml version="1.0" standalone="no"?>
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <linearGradient id="Gradient1">
      <stop offset="5%" stop-color="white"/>
      <stop offset="95%" stop-color="blue"/>
    </linearGradient>
    <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
      <stop offset="5%" stop-color="red"/>
      <stop offset="95%" stop-color="orange"/>
    </linearGradient>

    <pattern id="Pattern" x="0" y="0" width=".25" height=".25">
      <rect x="0" y="0" width="50" height="50" fill="skyblue"/>
      <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/>
      <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/>
    </pattern>

  </defs>

  <rect fill="url(#Pattern)" stroke="black" x="0" y="0" width="200" height="200"/>
</svg>

动画

动画元素放在形状元素的内部.

用来定义一个元素的某个属性如何踩着时点改变。在指定持续时间里，属性从开始值变成结束值， attributeName用来指定变化的属性

元素定义了一个元素如何沿着运动路径进行移动

元素变动了目标元素上的一个变形属性，从而允许动画控制转换、缩放、旋转或斜切

剪切和遮罩

在 (100,100) 创建一个圆形，半径是 100。

属性clip-path引用了一个带单个 rect 元素的元素。

它内部的这个矩形将把画布的上半部分涂黑。注意，clipPath元素经常放在一个defs元素内。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <clipPath id="cut-off-bottom">
      <rect x="0" y="0" width="200" height="100" />
    </clipPath>
  </defs>

  <circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" />
</svg>

滤镜

<svg width="250" viewBox="0 0 200 85"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <!-- Filter declaration 创建一个名为‘blur’的临时缓冲区 -->
    <filter id="MyFilter" filterUnits="userSpaceOnUse"
            x="0" y="0"
            width="200" height="120">

      <!-- offsetBlur 把临时缓冲区保存的‘blur’ 向右偏移4 向下偏移4 -->
      <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
      <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>

      <!-- litPaint 设置输入源‘offsetBlur’ 生成一个光照效果 将结果保存在‘specOut’ -->
      <feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75"
                          specularExponent="20" lighting-color="#bbbbbb"
                          result="specOut">
        <fePointLight x="-5000" y="-10000" z="20000"/>
      </feSpecularLighting>
      <!-- 输入源为‘specOut’ 第二个输入源为‘SourceAlpha’ 将‘specOut’的结果遮盖掉 -->
      <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
      <!-- 在 "SourceGraphic" 之上添加 "specOut" 的效果，复合模式为 "arithmetic" -->
      <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic"
                   k1="0" k2="1" k3="1" k4="0" result="litPaint"/>

      <!-- merge offsetBlur + litPaint -->
      <feMerge>
        <feMergeNode in="offsetBlur"/>
        <feMergeNode in="litPaint"/>
      </feMerge>
    </filter>
  </defs>

  <!-- Graphic elements -->
  <g filter="url(#MyFilter)">
      <path fill="none" stroke="#D90000" stroke-width="10"
            d="M50,66 c-50,0 -50,-60 0,-60 h100 c50,0 50,60 0,60z" />
      <path fill="#D90000"
            d="M60,56 c-30,0 -30,-40 0,-40 h80 c30,0 30,40 0,40z" />
      <g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" >
        <text x="52" y="52">SVG</text>
      </g>
  </g>
</svg>

transform

跟css3中的语法基本一致

transform - SVG：可缩放矢量图形 | MDN

全部demo.svg

<svg version="1.1"
     baseProfile="full"
     width="750" height="800"
     xmlns="http://www.w3.org/2000/svg">

  <rect width="100%" height="100%" fill="yellow" />

  <!-- 圆形 -->
  <circle cx="400" cy="100" r="80" fill="green" />
  <text x="400" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>

  <!-- 多边形 -->
  <polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145" stroke="orange" fill="transparent" stroke-width="5"/>

  <!-- 贝塞尔曲线 -->
  <path d="M 420 230 Q 440 205, 450 230 T 90230"/>

  <path fill="none" stroke="black"
        d="M 510,90
           C 530,90 525,10 550,10
           S 570,90 590,90" />

  <path fill="none" stroke="blue"
        d="M 10,350
           Q 25,325 40,350
           t 30,0 30,0 30,0 30,0 30,0" />

  <!-- 弧形路径 A -->
  <path d="M 80 80
           A 45 45, 0, 0, 0, 125 125
           L 125 80 Z" fill="blue"/>
  <path d="M 230 80
           A 45 45, 0, 1, 0, 275 125
           L 275 80 Z" fill="blue"/>
  <path d="M 80 230
           A 45 45, 0, 0, 1, 125 275
           L 125 230 Z" fill="purple"/>
  <path d="M 230 230
           A 45 45, 0, 1, 1, 275 275
           L 275 230 Z" fill="purple"/>

  <!-- 渐变 -->
  <defs>
      <linearGradient id="Gradient1">
        <stop class="stop1" offset="0%"/>
        <stop class="stop2" offset="50%"/>
        <stop class="stop3" offset="100%"/>
      </linearGradient>
      <linearGradient id="Gradient2" x1="0" x2="0.5" y1="0" y2="1">
        <stop offset="0%" stop-color="red"/>
        <stop offset="50%" stop-color="black" stop-opacity="0"/>
        <stop offset="100%" stop-color="blue"/>
      </linearGradient>
      <style type="text/css"><![CDATA[
        #rect1 { fill: url(#Gradient1); }
        .stop1 { stop-color: red; }
        .stop2 { stop-color: black; stop-opacity: 0.5; }
        .stop3 { stop-color: blue; }
      ]]></style>
  </defs>
  <rect id="rect1" x="300" y="300" rx="15" ry="15" width="100" height="100"/>
  <rect x="300" y="400" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)"/>


  <!-- 剪切 -->
  <defs>
    <clipPath id="cut-off-bottom">
      <rect x="0" y="400" width="200" height="100" />
    </clipPath>
  </defs>
  <circle cx="100" cy="500" r="100" clip-path="url(#cut-off-bottom)" />

  <!-- 遮罩 -->
  <defs>
    <linearGradient id="Gradient">
      <stop offset="0" stop-color="white" stop-opacity="0" />
      <stop offset="1" stop-color="white" stop-opacity="1" />
    </linearGradient>
    <mask id="Mask">
      <rect x="0" y="600" width="150" height="150" fill="url(#Gradient)"  />
    </mask>
  </defs>
  <rect x="0" y="600" width="150" height="150" fill="green" />
  <rect x="0" y="600" width="150" height="150" fill="red" mask="url(#Mask)" />


  <!-- 滤镜 -->
  <defs>
    <!-- Filter declaration -->
    <filter id="MyFilter" filterUnits="userSpaceOnUse"
            x="0" y="0"
            width="200" height="120">

      <!-- offsetBlur -->
      <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
      <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>

      <!-- litPaint -->
      <feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75"
                          specularExponent="20" lighting-color="#bbbbbb"
                          result="specOut">
        <fePointLight x="-5000" y="-10000" z="20000"/>
      </feSpecularLighting>
      <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
      <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic"
                   k1="0" k2="1" k3="1" k4="0" result="litPaint"/>

      <!-- merge offsetBlur + litPaint -->
      <feMerge>
        <feMergeNode in="offsetBlur"/>
        <feMergeNode in="litPaint"/>
      </feMerge>
    </filter>
  </defs>

  <!-- Graphic elements -->
  <g filter="url(#MyFilter)">
      <path fill="none" stroke="#D90000" stroke-width="10"
            d="M50,66 c-50,0 -50,-60 0,-60 h100 c50,0 50,60 0,60z" />
      <path fill="#D90000"
            d="M60,56 c-30,0 -30,-40 0,-40 h80 c30,0 30,40 0,40z" />
      <g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" >
        <text x="52" y="52">SVG</text>
      </g>
  </g>

</svg>

五年web前端经验

H5静态页面需要交互联调接口的项目 bug解决

有需求可以私信我

Harriet嘉

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
SVG学习

font-family、font-style、font-weight、font-variant、font-stretch、font-size、font-size-adjust、kerning、letter-spacing、word-spacing和text-decoration。线性渐变的stop节点通过指定位置的offset属性和stop-color属性来说明在渐变特定位置上是什么颜色，偏移量应该始终从0%（0）开始到100%（1）结束。如果后面存在额外的字符，耗尽他们最后一个字符之后放置的位置。
复制链接

扫一扫

专栏目录