svg基础及示例

SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。
SVG是W3C制定的一种新的二维矢量图形格式，也是规范中的网络矢量图形标准。
SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。
与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：
SVG 图像可通过文本编辑器来创建和修改；
SVG 图像可被搜索、索引、脚本化或压缩；SVG 是可伸缩的；SVG 图像可在任何的分辨率下被高质量地打印；
SVG 可在图像质量不下降的情况下被放大
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      svg {
        border: 1px solid silver;
      }
    </style>
  </head>
  <body>
    <!-- 基本形状 -->
    <svg width="200" height="150">
      <!-- 矩形 - rect元素属性：x：矩形左上角的坐标(用户坐标系)的x值。y：矩形左上角的坐标(用户坐标系)的y值。width：矩形宽度。height：矩形高度。 -->
      <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="2" />
      <!-- 矩形 - rx：实现圆角效果时，圆角沿x轴的半径。ry：实现圆角效果时，圆角沿y轴的半径。 -->
      <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="2" />
      <!-- 圆 - circle元素：r：圆的半径。cx：圆心坐标x值。cy：圆心坐标y值。 -->
      <circle cx="125" cy="25" r="15" stroke="red" fill="transparent" stroke-width="2" />
      <!-- 椭圆 - ellipse元素：rx：半长轴(x半径)。ry：半短轴(y半径)。cx：圆心坐标x值。cy：圆心坐标y值。 -->
      <ellipse cx="170" cy="25" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="2" />
      <!-- 直线 - line元素：x1：起点x坐标。y1：起点y坐标。x2：终点x坐标。y2：终点y坐标。 -->
      <line x1="10" x2="40" y1="50" y2="80" stroke="orange" fill="transparent" stroke-width="2" />
      <!-- 折线 - polyline元素：points：一系列的用空格，逗号，换行符等分隔开的点。每个点必须有2个数字：x值和y值 -->
      <polyline points="50,50 50,60 60,60 60,70 70,70 70,80" stroke="orange" fill="transparent" stroke-width="2" />
      <!-- 多边形 - polygon元素：points：一系列的用空格，逗号，换行符等分隔开的点。每个点必须有2个数字：x值和y值。 -->
      <polygon points="220,100 300,210 170,250" stroke="green" fill="transparent" stroke-width="2" />
      <!-- path元素的d属性，代表路径数据。在d的值中，M代表移至(Move to)，L代表划线至(Line to),Q代表二次贝塞尔曲线，T代表没有控制点的二次贝塞尔曲线
        ，C代表三次贝塞尔曲线，S代表省略第一个控制点的三次贝塞尔曲线，H代表水平划线，V代表垂直划线，A代表绘制圆弧，Z代表闭合路径。 
        以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。-->
      <path d="M20,130 Q40,105 50,130 T90,130" fill="none" stroke="blue" stroke-width="2" />
    </svg>
 
    <!-- <g>元素代表“组”，组内的元素作为一个整体。如果为组添加了变换属性，那么组中所有内容都会进行变换。变换属性包含了旋转、变形、缩放和斜切。 -->
    <svg width="200" height="150">
      <g transform="translate(60,0) rotate(30) scale(0.75)" id="ShapeGroup">
        <rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"></rect>
        <circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8"></circle>
      </g>
    </svg>
    <!-- SVG中的<defs>元素用于定义留待将来使用的内容。可以用<use>元素将<defs>定义的内容链接到需要展示的地方。 -->
    <svg width="200" height="150">
      <defs>
        <g id="ShapeGroup">
          <rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"></rect>
          <circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8"></circle>
        </g>
      </defs>
      <use xlink:href="#ShapeGroup" transform="translate(60,0) rotate(90) scale(0.4)"></use>
      <use xlink:href="#ShapeGroup" transform="translate(80,30) rotate(0) scale(0.75)"></use>
      <use xlink:href="#ShapeGroup" transform="translate(20,60) rotate(39) scale(0.25)"></use>
    </svg>
    <!-- 图案和渐变 -->
    <svg width="200" height="150">
      <defs>
        <!-- 图案填充 patternUnits值默认为objextBoundingBox，指pattern大小是占所填充图形的大小 -->
        <pattern id="RectPattern" width=".2" height=".2">
          <rect x="0" y="0" width="5" height="5" stroke="black" fill="green" stroke-width="1" />
        </pattern>
        <pattern id="TrianglePattern" width="10" height="10" patternUnits="userSpaceOnUse">
          <polygon points="5,0 10,10 0,10" />
        </pattern>
        <!-- linearGradient元素 - 定义线性渐变，x1,y1,x2,y2属性定义了渐变的方向，默认不写的话是水平渐变 -->
        <linearGradient id="LineGradient" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stop-color="#000"></stop>
          <stop offset="100%" stop-color="#f00"></stop>
        </linearGradient>
        <!-- radialGradient - 定义径向渐变，cx,cy,r属性定义了径向渐变的圆心和半径 ，fx,fy属性定义颜色中心处的位置-->
        <radialGradient id="RadialGradient" cx="0.5" cy="0.5" r="1" fx="0.75" fy="0.75">
          <stop offset="0%" stop-color="red" />
          <stop offset="100%" stop-color="blue" />
        </radialGradient>
      </defs>
      <rect x="5" y="5" width="90" height="60" stroke="red" fill="url(#LineGradient)" />
      <rect x="100" y="5" width="90" height="60" stroke="red" fill="url(#RadialGradient)" />
      <rect x="5" y="70" width="90" height="60" stroke="red" fill="url(#RectPattern)" />
      <rect x="100" y="70" width="90" height="60" stroke="red" fill="url(#TrianglePattern)" />
    </svg>
 
    <!-- SVG文本 -->
    <svg width="300" height="150">
      <!-- 文本元素text text-anchor设置水平对齐的方式，start、middle、end。默认值是start。-->
      <text x="10" y="20" stroke="#00f" fill="#00f" font-size="20px" font-weight="bold">
        你好，SVG
        <!-- 文本区间 - tspan元素，它用于渲染一个区间内的文本；它只能出现在text元素或者tspan元素的子元素中。典型的用法就是强调显示部分文本。rotate用于设置字体的旋转角度，x、y用于设置包含的文本的绝对坐标值 -->
        <tspan font-weight="bold" fill="red">今天是个好天气</tspan>
      </text>
      <text x="10" y="70" stroke="#00f" fill="#00f" font-size="13px" font-weight="bold">
        <!-- 文本路径 - textPath元素:xlink:href属性获取指定的路径并把文本对齐到这个路径上,艺术字效果 -->
        <textPath xlink:href="#my_path">今天是个好天气</textPath>
      </text>
      <path d="M20,50 Q40,25 50,50 T90,50" id="my_path" fill="none" stroke="blue" stroke-width="5" />
    </svg>
 
    <!-- SVG图片 -->
    <svg width="200px" height="150px">
      <image xlink:href="images/1.jpg" x="0" y="0" height="150px" width="200px" />
    </svg>
 
    <!-- SVG滤镜 -->
    <svg width="200px" height="150px">
      <defs>
        <!-- <filter> 标签用来定义 SVG 滤镜。<filter> 标签使用必需的 id 属性来定义向图形应用哪个滤镜
           <filter> 标签必须嵌套在 <defs> 标签内。 -->
        <filter id="Gaussian_Blur">
          <!-- <feGaussianBlur> 标签的 stdDeviation 属性可定义模糊的程度,in="SourceGraphic" 这个部分定义了由整个图像创建效果 -->
          <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
        </filter>
      </defs>
      <image xlink:href="images/1.jpg" x="0" y="0" height="150px" width="200px" filter="url(#Gaussian_Blur)" />
    </svg>
 
    <!-- SVG动画实例 
    attributeName表示要变化的元素属性名称
    attributeType支持三个固定参数：CSS、XML、auto，用来表明attributeName属性值的列表。x、y以及transform属于XML；opacity等CSS属于CSS；auto为默认值
    from  动画的起始值
    to  指定动画的结束值
    by 动画的相对变化值
    values  用分号分隔的一个或多个值，可以看成是动画的多个关键值点
    begin 指动画开始的时间 beigin="3s;6s"表示的是3s之后动画走一下，6s时候动画再走一下 
                          begin=[元素的id].begin/end +/- 时间值 表示其它动画begin或者end之前或者之后动画开始，可以实现两个独立元素的动画级联效果。
                          begin=[元素的id].[事件类型] +/- 时间值 表示事件触发之后动画开始
                          begin=[元素的id].repeat(整数) +/- 时间值 指其它动画重复N次之后动画开始
                          begin="indefinite"，表示“无限等待”。
    dur属性值只有两种：常规时间值 | "indefinite"   "indefinite"指动画不执行
    calcMode, keyTimes, keySplines  控制动画曲线   calcMode属性支持4个值：discrete | linear | paced | spline
    repeatCount表示动画执行次数 
　　repeatDur定义重复动画的总时间 
    fill表示动画间隙的填充方式。支持参数有：freeze | remove。其中remove是默认值，表示动画结束直接回到开始的地方。freeze 表示动画结束后元素保持了动画时的状态   
    accumulate 累积 支持参数有：none | sum。默认值是none， sum表示动画结束时候的位置作为下次动画的起始位置
　　additive控制动画是否附加。支持参数有：replace | sum。默认值是replace ，sum表示动画会附加到其他低优先级的动画上
    内置的API:svg.pauseAnimations()暂停和svg.unpauseAnimations()启动动画
   -->
    <svg width="200px" height="150px">
      <text font-size="20" y="30" x="0">
        蒲公英
        <set attributeName="x" attributeType="XML" to="60" begin="2s" />
      </text>
      <text font-size="20" y="60" x="0">
        蒲公英
        <animate attributeName="x" to="60" begin="0s" dur="2s" repeatCount="indefinite" />
      </text>
      <text font-size="20" y="90" x="0">
        蒲公英
        <!-- <animateTransform>用于实现transform变换动画效果 -->
        <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="1.2" begin="0s" dur="2s" repeatCount="indefinite" />
      </text>
      <text font-size="20" y="120" x="0">
        蒲公英
        <!-- <animateMotion>可以让SVG各种图形沿着特定的path路径运动 -->
        <animateMotion path="M 0 0 H 30 V 30 Z" begin="0s" dur="3s" repeatCount="indefinite" />
      </text>
    </svg>
    <svg width="200px" height="150px">
      <text font-size="20" y="30" x="0">
        蒲公英
        <animate attributeName="x" values="0;50;0;70;0" dur="2s" repeatCount="indefinite" />
      </text>
      <text font-size="20" y="60" x="0">
        蒲公英
        <animate id="x1" attributeName="x" to="70" dur="2" fill="freeze" />
        <animate attributeName="y" begin="x1.end" to="80" dur="2" fill="freeze" />
      </text>
      <g>
        <circle id="circle" cx="10" cy="85" r="10" />
        <text font-size="20" y="90" x="30">
          蒲公英
          <animate id="x2" attributeName="x" begin="circle.click" to="70" dur="2" />
        </text>
      </g>
      <text font-size="20" y="120" x="0">
        蒲公英
        <animate id="x3" attributeName="x" to="70" dur="2" repeatCount="3" />
        <animate attributeName="y" begin="x3.repeat(2)" to="150" dur="2" fill="freeze" />
      </text>
    </svg>
    <svg width="200px" height="150px" onclick="func(this)">
      <g>
        <text font-size="20" y="30" x="50">
          蒲公英
          <animate id="animate1" attributeName="x" begin="indefinite" to="70" dur="1" repeatCount="indefinite" />
        </text>
        <a xlink:href="#animate1">
          <text y="30" fill="#cd0000" font-size="20">点击</text>
        </a>
      </g>
      <text font-size="20" y="60" x="0">
        蒲公英
        <animate attributeName="x" dur="3" values="40;60;80;100" calcMode="discrete" repeatCount="indefinite" />
      </text>
      <text font-size="20" y="90" x="0">
        蒲公英
        <animate attributeName="x" dur="3" values="40;60;80;100" calcMode="paced" repeatCount="indefinite" />
      </text>
      <text font-size="20" y="120" x="0">
        蒲公英
        <animate attributeName="x" dur="3" values="40;60;100" keyTimes="0; .8; 1" calcMode="spline" keySplines=".5 0 .5 1; 0 0 1 1" repeatCount="indefinite" />
      </text>
    </svg>
    <script>
      function func(this_obj) {
        if (!this_obj.paused) {
          this_obj.paused = true;
          this_obj.pauseAnimations();
        } else {
          this_obj.paused = false;
          this_obj.unpauseAnimations();
        }
      }
    </script>
    <svg xmlns="http://www.w3.org/2000/svg" width="400px" height="150px" version="1.1">
      <rect id="rec" x="300" y="100" width="300" height="100" style="fill: lime">
        <animate attributeName="x" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="300" to="0" />
        <animate attributeName="y" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="100" to="0" />
        <animate attributeName="width" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="300" to="400" />
        <animate attributeName="height" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="100" to="150" />
        <animate attributeName="fill" attributeType="CSS" from="lime" to="red" begin="2s" dur="4s" fill="freeze" />
      </rect>
      <g transform="translate(50,50)">
        <text id="TextElement" x="0" y="0" style="font-size: 24; visibility: hidden">
          It's SVG!
          <set attributeName="visibility" attributeType="CSS" to="visible" begin="0s" dur="5s" fill="freeze" />
          <animateMotion path="M 0 0 L 100 50" begin="1s" dur="5s" fill="freeze" />
          <animate attributeName="fill" attributeType="CSS" from="red" to="blue" begin="1s" dur="5s" fill="freeze" />
          <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-30" to="0" begin="1s" dur="5s" fill="freeze" />
          <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="3" begin="1s" dur="5s" fill="freeze" />
        </text>
      </g>
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" width="200" height="150" version="1.1">
      <rect x="0" y="0" width="200" height="150" style="fill: blue">
        <animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="5s" repeatCount="indefinite" />
      </rect>
    </svg>
 
    <!-- 超链接 -->
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="150" version="1.1">
      <a xlink:href="http://www.w3schools.com" target="_blank">
        <rect x="0" y="0" width="200" height="150" style="fill: blue; stroke: pink; stroke-width: 5; opacity: 0.9" />
      </a>
    </svg>
  </body>
</html>