svg常用标签与svg波浪动画

SVG常用标签

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

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

3 rect ：矩形

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
   <rect x="20" y="20" rx="20" ry="20" width="250" height="100" style="fill:red;stroke:black; stroke-width:5;opacity:0.5"/>
</svg>

4 circle 圆形

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

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

5 ellipse ：椭圆形

cx 属性定义圆点的 x 坐标, cy 属性定义圆点的 y 坐标, rx 属性定义水平半径, ry 属性定义垂直半径

<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 属性定义垂直半径

6 polygon ：多边形

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

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

7 defs:

用于定义所有可能再次引用的图形元素。在defs元素中定义的图形元素不会直接呈现。你可以在你的视口的任意地方利用 <use>元素呈现这些元素。

  <svg width="80px" height="30px" viewBox="0 0 80 30" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="Gradient01">
      <stop offset="20%" stop-color="#39F" />
      <stop offset="90%" stop-color="#F3F" />
    </linearGradient>
  </defs>
  <rect x="10" y="10" width="60" height="10" 
        fill="url(#Gradient01)"  />
</svg>

8 g:元素

g是用来组合对象的容器。添加到g元素上的变换会应用到其所有的子元素上。添加到g元素的属性会被其所有的子元素继承。此外，g元素也可以用来定义复杂的对象，之后可以通过元素来引用它们。

<svg width="100%" height="100%" viewBox="0 0 95 50"  xmlns="http://www.w3.org/2000/svg">
  <g stroke="green" fill="white" stroke-width="5">
    <circle cx="25" cy="25" r="15" />
    <circle cx="40" cy="25" r="15" />
    <circle cx="55" cy="25" r="15" />
    <circle cx="70" cy="25" r="15" />
  </g>
</svg>

9 path:

用来定义形状的通用元素。所有的基本形状都可以用path元素来创建，path中d用来绘制图形的路径。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g fill="none">
    <path stroke="red" d="M5 20 l215 0" />
    <path stroke="black" d="M5 40 l215 0" />
    <path stroke="blue" d="M5 60 l215 0" />
  </g>
</svg>

10 filter:

<filter>标签用来定义SVG滤镜。<filter>标签使用必需的id属性来定义向图形应用哪个滤镜.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg>

11 stop:

用于定义一个渐变上的颜色坡度,它可以是<linearGradient>元素或者<radialGradient>元素的子元素。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,255);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

12 animate:

随时间动态改变属性。

<svg width="120" height="120" viewPort="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="100" height="100">
    <animate attributeType="XML" attributeName="x" from="-100" to="120"
        dur="10s" repeatCount="indefinite"/>
  </rect>
</svg>

13 animateMotion:使元素沿着动作路径移动。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="120" height="120" viewBox="0 0 120 120" version="1.1"> 
    <path d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110" stroke="lightgrey" stroke-width="2" fill="none" id="theMotionPath"/>
    <circle cx="10" cy="110" r="3" fill="lightgrey"/>
    <circle cx="110" cy="10" r="3" fill="lightgrey"/>
    <circle cx="" cy="" r="5" fill="red">
        <!-- Define the motion path animation -->
        <animateMotion dur="6s" repeatCount="indefinite">
           <mpath xlink:href="#theMotionPath"/>
        </animateMotion>
    </circle>
</svg>

14 animateTransform:

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

<svg width="120" height="120"  viewBox="0 0 120 120"
     xmlns="http://www.w3.org/2000/svg" version="1.1"
     xmlns:xlink="http://www.w3.org/1999/xlink" >

    <polygon points="60,30 90,90 30,90">
        <animateTransform attributeName="transform"
                          attributeType="XML"
                          type="rotate"
                          from="0 60 70"
                          to="360 60 70"
                          dur="10s"
                          repeatCount="indefinite"/>
    </polygon>
</svg>

15 clipPath:

自定义一个裁剪区域，当在另一个元素上使用clip-path属性引用该自定义裁剪区域的时候会将原来的图形与该裁剪区域取交集,裁剪后的图形超出裁剪区域的部分将不会响应事件。

<svg width="120" height="120" viewPort="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <clipPath id="clipPath">
                <rect x="15" y="15" width="40" height="40" />
            </clipPath>
        </defs>
        <circle cx="25" cy="25" r="20" style="fill: #0000ff; clip-path: url(#clipPath); " />
</svg>

16 feGaussianBlur:

对输入图像进行高斯模糊，属性stdDeviation中指定的数量定义了钟形。

<svg width="230" height="120"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <filter id="blurMe">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
  </filter>
  <circle cx="60"  cy="60" r="50" fill="green" />
  <circle cx="170" cy="60" r="50" fill="green"
          filter="url(#blurMe)" />
</svg>

17 marker:在特定的<path>元素、<line>元素、<polyline>元素或者<polygon>元素上绘制箭头或者多边标记图形。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="120" height="120" viewBox="0 0 120 120"
        version="1.1">
        <defs>
            <marker id="Triangle" viewBox="0 0 10 10" refX="1" refY="5" markerWidth="6" markerHeight="6" orient="auto">
                <path d="M 0 0 L 10 5 L 0 10 z" />
            </marker>
        </defs>
        <polyline points="10,90 50,80 90,20" fill="none" stroke="black" stroke-width="2" marker-end="url(#Triangle)" />
</svg>

18 mpath:

使<animateMotion> 元素能够引用一个外部的<path>元素作为运动路径的定义。

<svg width="500" height="300" viewBox="0 0 500 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <rect x="1" y="1" width="498" height="298" fill="none" stroke="blue" stroke-width="2" />
        <!-- Draw the outline of the motion path in blue, along
          with three small circles at the start, middle and end. -->
        <path id="path1" d="M100,250 C 100,50 400,50 400,250" fill="none" stroke="blue" stroke-width="7.06" />
        <circle cx="100" cy="250" r="17.64" fill="blue" />
        <circle cx="250" cy="100" r="17.64" fill="blue" />
        <circle cx="400" cy="250" r="17.64" fill="blue" />
        <!-- Here is a triangle which will be moved about the motion path.
       It is defined with an upright orientation with the base of
       the triangle centered horizontally just above the origin. -->
        <path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z" fill="yellow" stroke="red" stroke-width="7.06">
            <!-- Define the motion path animation -->
            <animateMotion dur="6s" repeatCount="indefinite" rotate="auto">
                <mpath xlink:href="#path1" />
            </animateMotion>
        </path>
 </svg>

19 pattern:

使用预定义的图形对一个对象进行填充或描边。pattern元素让预定义图形能够以固定间隔在x轴和y轴上重复（或平铺）从而覆盖要涂色的区域。先使用pattern元素定义图案，然后在给定的图形元素上用属性fill或属性stroke引用用来填充或描边的图案。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="120" height="120" viewBox="0 0 120 120" version="1.1">
    <defs>
        <pattern id="Triangle" width="10" height="10" patternUnits="userSpaceOnUse">
            <polygon points="5,0 10,10 0,10"/>
        </pattern>
    </defs>

    <circle cx="60" cy="60" r="50" fill="url(#Triangle)"/>
</svg>

20 symbol:

用来定义一个图形模板对象，它可以用一个<use>元素实例化。symbol元素对图形的作用是在同一文档中多次使用，添加结构和语义。结构丰富的文档可以更生动地呈现出来，类似讲演稿或盲文，从而提升了可访问性。注意，一个symbol元素本身是不呈现的。只有symbol元素的实例（亦即，一个引用了symbol的 <use>元素）才能呈现。

<svg>
<!-- symbol definition  NEVER draw -->
<symbol id="sym01" viewBox="0 0 150 110">
  <circle cx="50" cy="50" r="40" stroke-width="8" stroke="red" fill="red"/>
  <circle cx="90" cy="60" r="40" stroke-width="8" stroke="green" fill="white"/>
</symbol>

<!-- actual drawing by "use" element -->
<use xlink:href="#sym01"
     x="0" y="0" width="100" height="50"/>
<use xlink:href="#sym01"
     x="0" y="50" width="75" height="38"/>
<use xlink:href="#sym01"
     x="0" y="100" width="50" height="25"/>
</svg>

21 tspan:

在 <text>元素中，利用内含的tspan元素，可以调整文本和字体的属性以及当前文本的位置、绝对或相对坐标值。

<svg xmlns="http://www.w3.org/2000/svg" width="250" height="40" viewBox="0 0 250 40" version="1.1">
  <style>
    text {font: 20px Verdana, Helvetica, Arial, sans-serif;}
    tspan {fill: red;font-weight: bold}
  </style>
  <text x="15" y="30">You are
     <tspan>not</tspan>
     a banana
  </text>
</svg>

22 use：

在SVG文档内取得目标节点，并在别的地方复制它们。它的效果等同于这些节点被深克隆到一个不可见的DOM中，然后将其粘贴到use元素的位置，很像HTML5中的克隆模板元素。因为克隆的节点是不可见的，所以当使用CSS样式化一个use元素以及它的隐藏的后代元素的时候，必须小心注意。隐藏的、克隆的DOM不能保证继承CSS属性，除非你明文设置使用CSS继承。出于安全原因，一些浏览器可能在use元素上应用同源策略，还有可能拒绝载入xlink:href属性内的跨源URI。

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <style>
            .classA {
                fill: red
            }
        </style>
        <defs>
            <g id="Port">
                <circle style="fill:inherit" r="10" />
            </g>
        </defs>

        <text y="15">black</text>
        <use x="50" y="10" xlink:href="#Port" />
        <text y="35">red</text>
        <use x="50" y="30" xlink:href="#Port" class="classA" />
        <text y="55">blue</text>
        <use x="50" y="50" xlink:href="#Port" style="fill:blue" />
</svg>

svg波浪动画

  <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="300"
    height="200">
    <g >
        <path
            d="M 0 70 Q 75 39, 150 70 T 300 70 T 450 70 T 600 70 T 750 70 V 100 H 0 V 0"
            fill="#ccc">
        </path>
        <animateTransform
            attributeName="transform"
            attributeType="XML"
            type="translate"
            from="0" to="-300" dur="1.5s"
            repeatCount="indefinite">
        </animateTransform>
    </g>
</svg>


<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="200">
  <g fill="rgba(106,127,239,0.1)">
      <path d="M 0 70 Q 75 39, 150 70 T 300 70 T 450 70 T 600 70 T 750 70 V 100 H 0 V 0"></path>
      <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="-300" dur="1.5s" repeatCount="indefinite"></animateTransform>
  </g>
  <g fill="rgba(106,127,239,0.15)">
      <path d="M 0 70 Q 87.5 47, 175 70 T 350 70 T 525 70 T 700 70 T 875 70 T 1050 70 V 100 H 0 V 0"></path>
      <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="-350" dur="3s" repeatCount="indefinite"></animateTransform>
  </g>
  <g fill="rgba(106,127,239,0.18)" transform="translate(-903.868 0)">
      <path d="M 0 70 Q 135 36, 270 70 T 540 70 T 810 70 T 1080 70 V 100 H 0 V 0" transform="translate(-38.232284367796474, 0)"></path>
      <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="-540" dur="2s" repeatCount="indefinite"></animateTransform>
  </g>
</svg>