SVG—初识1之SVG在页面中、形状和文本

SVG在页面中

SVG 文件可通过以下标签嵌入 HTML 文档：<embed>、<object> 或者 <iframe>。

1. <embed>：<embed src=“circle1.svg” type=“image/svg+xml” />
2. <object>：<object data=“circle1.svg” type=“image/svg+xml”></object>
3. <iframe>：<iframe src=“circle1.svg”></iframe>

直接在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>

用a标签链接

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

SVG形状

1. 矩形 <rect>
2. 圆形 <circle>
3. 椭圆 <ellipse>
4. 线 <line>
5. 折线 <polyline>
6. 多边形 <polygon>
7. 路径 <path>

矩形

<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>

• 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>

• 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>

• 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>

• 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>

• 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>

• 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>

<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>

直线

<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>

• 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>

• 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>

<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>

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>

fill-rule

有效值	nonzero evenodd inherit
默认值	nonzero
应用于	shape形状类元素 和 文字内容类元素
可继承	是
比例	无
媒体	可见
动画可用	是

多段线

<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>

<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>

路径

• 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

命令	参数	描述
M	x y	移动画笔到给定坐标，即起始点
L	x y	绘制一条到给定坐标的线，可提供多组坐标绘制折线
H	x	绘制一条到 x 坐标的横线
V	y	绘制一条到 y 坐标的竖线
C	x y x1 y1 x2 y2	绘制一条从当前点到（x,y）的三次贝塞尔曲线，（x1,y1）为曲线的开始控制点，（x2,y2）为曲线的终点控制点
S	x y x1 y1	绘制一条从当前点到（x,y）的三次贝塞尔曲线，（x1,y1）为新端点的控制点
Q	x y x1 y1	绘制一条从当前点到（x,y），控制点为（x1,y1）的二次贝塞尔曲线
T	x y	绘制一条从当前点到（x,y）的二次贝塞尔曲线
A	rx ry x-axis-rotation large-arc-flag sweep-flag x y	绘制当前点到（x,y）的椭圆弧，椭圆弧的 x，y轴半径分别为 rx,ry。椭圆相对于 x 轴旋转 x-axis-rotation 度。large-arc-flag 等于0表示弧线小于180度，等于1表示弧线大于180度。sweep-flag 等于0 表示弧线逆时针旋转，等于1表示弧线顺时针选装
Z	闭合路径

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

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

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

 <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">A</text>
      <text x="250" y="50" dy="-10">B</text>
      <text x="400" y="350" dx="30">C</text>
    </g>
  </svg>

SVG文本<text>

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

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <text x="20" y="20" fill="red" transform="rotate(30 20,40)">   <!-- 在(20,40)位置旋转30度 -->
      你好我是你爸爸
    </text>
  </svg>

路径上的文字

<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="20" y="20" fill="red" transform=""></text>-->
      <text x="10" y="100" style="fill:red;">
        <textPath xlink:href="#road">I love SVG I love SVG</textPath>
        <textPath xlink:href="#road1">I love SVG I love SVG</textPath>
        <textPath xlink:href="#road2">I love SVG I love SVG</textPath>
        <textPath xlink:href="#road3">I love SVG I love SVG</textPath>
      </text>
    </svg>

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

<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">你好Jason</tspan>
      <tspan x="10" y="100" fill="green">好久不见，你在哪里？</tspan>
      <tspan>我在江湖</tspan>
    </text>
  </svg>

作为链接文本

<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>

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>

<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>

<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>

<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>

SVG滤镜

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

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

SVG滤镜定义在<defs>元素中
<filter>标签用来定义SVG滤镜

feGaussianBlur创建模糊效果

1. 需要使用 <filter> 标签来定义一个 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>

feOffset创建阴影效果

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

<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>

<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>

<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>

• <feOffset>元素的属性改为"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>

• <feColorMatrix>过滤器是用来转换偏移的图像使之更接近黑色的颜色。 '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>