SVG—初识1

直接在Html中嵌入svg代码

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
svg>
1
2
3

用a标签链接

<a href="circle1.svg">查看 SVG 文件a>
1

SVG形状

1. 矩形
2. 圆形
3. 椭圆
4. 线
5. 折线
6. 多边形
7. 路径

矩形

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
	<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)">rect>
svg>
1
2
3

• rect 元素的 width 和 height 属性可定义矩形的高度和宽度
• style 属性用来定义 CSS 属性
• CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
• CSS 的 stroke-width 属性定义矩形边框的宽度
• CSS 的 stroke 属性定义矩形边框的颜色
  

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <rect
      x="50"
      y="20"
      width="150"
      height="150"
      style="fill:blue;stroke:pink;stroke-width:5;stroke-opacity:0.9;fill-opacity:0.1"
    >rect>
  svg>
1
2
3
4
5
6
7
8
9

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

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <rect
      x="30"
      y="20"
      width="150"
      height="150"
      stroke-width="5"
      style="fill:blue;stroke:pink;opacity:0.5"
    />
  svg>
1
2
3
4
5
6
7
8
9
10

• CSS opacity 属性用于定义了元素的透明值 (范围: 0 到 1)

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <rect
      x="50"
      y="20"
      rx="20"
      ry="20"
      width="150"
      height="150"
      style="fill:red;stroke:black;stroke-width:5;opacity:0.5"
    >rect>
  svg>
1
2
3
4
5
6
7
8
9
10
11

• rx 和 ry 属性可使矩形产生圆角。

圆形

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <circle
      cx="100"
      cy="50"
      r="40"
      stroke-width="2"
      style="fill:red;stroke:black;"
    />
  svg>
1
2
3
4
5
6
7
8
9

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

椭圆

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
     <ellipse cx="150" cy="100" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2;"/>
   svg>
1
2
3

• CX属性定义的椭圆中心的x坐标
• CY属性定义的椭圆中心的y坐标
• RX属性定义的水平半径
• RY属性定义的垂直半径

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <ellipse cx="200" cy="100" rx="100" ry="30" style="fill:yellow;" />
    <ellipse cx="200" cy="80" rx="80" ry="30" style="fill:purple;" />
    <ellipse cx="200" cy="60" rx="60" ry="30" style="fill:pink" />
  svg>
1
2
3
4
5

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <ellipse cx="150" cy="100" rx="100" ry="30" style="fill:yellow;" />
    <ellipse cx="150" cy="100" rx="90" ry="20" style="fill:white" />
  svg>
1
2
3
4

直线

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <line x1="0" y1="200" x2="200" y2="0" style="stroke:yellow;stroke-width:2" />
  svg>
1
2
3

• x1 属性在 x 轴定义线条的开始
• y1 属性在 y 轴定义线条的开始
• x2 属性在 x 轴定义线条的结束
• y2 属性在 y 轴定义线条的结束

多边形

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <polygon points="200,15 300,30 150,45" style="fill:lime;stroke-width:1;stroke:purple"/>
  svg>
1
2
3

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

五边形

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <polygon points="200,15 150,80 180,150 230,150 250,80" style="fill:lightblue;stroke-width:1;stroke:yellow"/>
  svg>
1
2
3

<svg width="500" height="210">
    <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:yellow;stroke-width:5;stroke:mediumpurple;fill-rule:nonzero"/>
  svg>
1
2
3

fill-rule:evenodd值时候

<svg width="500" height="210">
    <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:yellow;stroke-width:5;stroke:mediumpurple;fill-rule:evenodd"/>
  svg>
1
2
3

fill-rule

多段线

<svg width="500" height="500">
    <polyline points="10,15 20,35 40,60 80,100 120,150 150,180" style="fill:none;stroke:mediumpurple;stroke-width:3"/>
  svg>
1
2
3

<svg width="300" height="300">
    <polyline points="20,20 40,20 40,40 60,40 60,60 80,60 80,80 100,80" style="fill:none;stroke:greenyellow;stroke-width:3" />
  svg>
1
2
3

路径

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

元素中支持下列命令，如果是大写命令表示绝对定位，小写则表示相对定位

<svg width="300" height="300">
    <path d="M150 0 L75 200 L225 200 Z"/>
  svg>
1
2
3

创建一个二次方贝塞尔曲线

 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="400" width="450">
    <path
      id="lineAB"
      d="M 100 350 l 150 -300"
      style="stroke:red;stroke-width:3;fill:none"
    >path>
    <path
      id="lineBC"
      d="M 250 50 l 150 300"
      style="stroke:red;stroke-width:3;fill:none"
    >path>
    <path
      d="M 175 200 l 150 0"
      style="stroke:green;stroke-width: 3;fill: none"
    >path>
    <path
      d="M 100 350 q 150 -300 300 0"
      style="stroke:blue;stroke-width:3;fill:none"
    />
    <g stroke-width="3" stroke="black">
      <circle cx="100" cy="350" r="3"/>
      <circle cx="250" cy="50" r="3"/>
      <circle cx="400" cy="350" r="3" />
    g>
    <g font-size="30" font="sans-serif" stroke="none" fill="black" text-anchor="middle">
      <text x="100" y="350" dx="-30">Atext>
      <text x="250" y="50" dy="-10">Btext>
      <text x="400" y="350" dx="30">Ctext>
    g>
  svg>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

SVG文本

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <text x="20" y="20" fill="red">你好我是你爸爸text>
  svg>
1
2
3

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <text x="20" y="20" fill="red" transform="rotate(30 20,40)">   
      你好我是你爸爸
    text>
  svg>
1
2
3
4
5

路径上的文字

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="400"
         width="400"
         xmlns:xlink="http://www.w3.org/1999/xlink">
      <defs>
        <path
          id="road"
          d="M0 80 A 50 50 0 0 0 100 80"
        >path>
        <path
          id="road1"
          d="M100 80 A 50 50 0 0 1 200 80"
        >path>
        <path
          id="road2"
          d="M200 80 A 50 50 0 0 0 300 80"
        >path>
        <path
          id="road3"
          d="M300 80 A 50 50 0 0 1 400 80"
        >path>
      defs>
      
      <text x="10" y="100" style="fill:red;">
        <textPath xlink:href="#road">I love SVG I love SVGtextPath>
        <textPath xlink:href="#road1">I love SVG I love SVGtextPath>
        <textPath xlink:href="#road2">I love SVG I love SVGtextPath>
        <textPath xlink:href="#road3">I love SVG I love SVGtextPath>
      text>
    svg>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

元素可以安排任何分小组与 元素的数量。每个 元素可以包含不同的格式和位置。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <text x="10" y="20" fill="red">
      Dear Bob,
      <tspan x="50" y="60" fill="blue">你好Jasontspan>
      <tspan x="10" y="100" fill="green">好久不见，你在哪里？tspan>
      <tspan>我在江湖tspan>
    text>
  svg>
1
2
3
4
5
6
7
8

作为链接文本

<svg
    xmlns="http://www.w3.org/2000/svg"
    version="1.1"
    xmlns:xlink="http://www.w3.org/1999/xlink"
  >
    <a xlink:href="http://www.baidu.com" target="_blank">
      <text x="50" y="50" fill="red">百度一下，你就知道text>
    a>
  svg>
1
2
3
4
5
6
7
8
9

SVG的Stroke属性

• stroke
• stroke-width
• stroke-linecap
• stroke-dasharray

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500">
    <g fill="none">
      <path stroke="red" d="M50 50 1350 50">path>
      <path stroke="blue" d="M50 100 1350 100">path>
      <path stroke="green" d="M50 150 1350 150">path>
    g>
  svg>
1
2
3
4
5
6
7

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <g stroke="black">
      <path stroke-width="2" d="M5 10 1250 10">path>
      <path stroke-width="4" d="M5 20 1250 20">path>
      <path stroke-width="6" d="M5 30 1250 30">path>
    g>
  svg>
1
2
3
4
5
6
7

<svg xmlns="http://www.w3.org/2000/svg">
    <g stroke="black" stroke-width="6">
      <path stroke-linecap="butt" d="M5 10 1250 10"/>
      <path stroke-linecap="round" d="M5 30 1250 30"/>
      <path stroke-linecap="square" d="M5 50 1250 50"/>
    g>
  svg>
1
2
3
4
5
6
7

<svg xmlns="http://www.w3.org/2000/svg">
    <g stroke="black" stroke-width="4">
      <path stroke-dasharray="10,10" d="M5 10 1250 10">path>
      <path stroke-dasharray="20,10" d="M5 30 1250 30">path>
      <path stroke-dasharray="20,10,15,10,5,2" d="M5 50 1250 50">path>   
    g>
  svg>
1
2
3
4
5
6
7

SVG滤镜

滤镜元素
滤镜元素有很多，每一个元素代表一种功能

• feBlend - 与图像相结合的滤镜
• feColorMatrix - 用于彩色滤光片转换
• feComponentTransfer
• feComposite
• feConvolveMatrix
• feDiffuseLighting
• feFlood
• feGaussianBlur
• feImage
• feMerge
• feMorphology
• feOffset - 过滤阴影
• feSpecularLighting
• feTile
• feTurbulence
• feDistantLight - 用于照明过滤
• fePointLight - 用于照明过滤
• feSpotLight - 用于照明过滤

SVG滤镜定义在元素中
标签用来定义SVG滤镜

feGaussianBlur创建模糊效果

1. 需要使用 标签来定义一个 SVG 滤镜。设置唯一标识id属性，SVG 图形使用这个 id 来引用滤镜。
2. 使用feGaussianBlur创建模糊效果。in="SourceGraphic"属性定义了模糊效果要应用于整个图片，stdDeviation 属性定义了模糊的程度。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="400">
    <defs>
      <filter id="f1" x="0" y="0">
        <feGaussianBlur in="SourceGraphic" stdDeviation="2">feGaussianBlur>
      filter>
    defs>
    <circle cx="60" cy="60" r="50" style="fill:#00a4ff;stroke-width:2;stroke:pink" filter="url(#f1)">circle>
  svg>
1
2
3
4
5
6
7
8

feOffset创建阴影效果

第一个例子偏移一个矩形（带），然后混合偏移图像顶部（含）：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <filter id="f2" x="0" y="0" width="200%" height="200%">
            <feOffset dx="20" dy="20" in="SourceGraphic" result="offOut"/>

        filter>
    defs>
    <rect width="100" height="100" style="fill:yellow;stroke:green;stroke-width:3;" filter="url(#f2)"/>
svg>
1
2
3
4
5
6
7
8
9

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <filter id="f2" x="0" y="0" width="200%" height="200%">
            <feOffset dx="20" dy="20" in="SourceGraphic" result="offOut"/>
            <feBlend in="SourceGraphic" in2="offOut" mode="normal"/>
        filter>
    defs>
    <rect width="100" height="100" style="fill:yellow;stroke:green;stroke-width:3;" filter="url(#f2)"/>
svg>
1
2
3
4
5
6
7
8
9

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500">
    <defs>
        <filter id="f3" x="0" y="0">
            <feOffset in="SourceGraphic" dx="20" dy="20" result="offOut" />
            <feGaussianBlur in="offOut" stdDeviation="15" result="gaublur" />
            <feBlend in="SourceGraphic" in2="gaublur" mode="normal" />
        filter>
    defs>
    <circle cx="100" cy="100" r="100" style="fill:skyblue;stroke-width: 3;stroke: green;" filter="url(#f3)"/>
svg>
1
2
3
4
5
6
7
8
9
10

• 元素的属性改为"SourceAlpha"在Alpha通道使用残影，而不是整个RGBA像素。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1000" height="1000">
    <defs>
        <filter id="f4" x="0" y="0">
            <feOffset in="SourceAlpha" dx="20" dy="20"  result="offOut"/>
            <feGaussianBlur in="offOut" stdDeviation="15" result="GauBlur"/>
            <feBlend in2="GauBlur" in="SourceGraphic" mode="normal" />
        filter>
    defs>
    <ellipse cx="60" cy="110" rx="50" ry="100" style="fill:yellow;stroke-width: 3;stroke: green" filter="url(#f4)"/>
svg>
1
2
3
4
5
6
7
8
9
10

• 过滤器是用来转换偏移的图像使之更接近黑色的颜色。 '0.2’矩阵的三个值都获取乘以红色，绿色和蓝色通道。降低其值带来的颜色至黑色（黑色为0）

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <filter id="f5" x="0" y="0">
            <feOffset in="SourceGraphic" dx="20" dy="20" result="offOut" />
            <feColorMatrix in="offOut" types="matrix" result="matrixOut"
                           values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
            <feGaussianBlur in="matrixOut" stdDeviation="10" result="gaublur" />
            <feBlend in="SourceGraphic" in2="gaublur" mode="normal" />
        filter>
    defs>
    <rect width="100" height="100" style="fill:yellow;stroke-width: 3;stroke: green;" filter="url(#f5)"/>
svg>
1
2
3
4
5
6
7
8
9
10
11
12