HTML5 SVG

### HTML5 SVG

SVG（Scalable Vector Graphics，可缩放矢量图形）是一种基于XML的标记语言，用于描述二维矢量图形。SVG与HTML5一同工作，使得图形可以在Web页面上直接嵌入和操作。

#### SVG基础

1. **SVG元素**：
   SVG内容被包含在`<svg>`元素中，可以内嵌在HTML中或作为独立文件使用。
   ```html
   <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
     
   </svg>
   ```

2. **绘制基本形状**：
   SVG允许你使用简单的标签来绘制基本形状，如矩形、圆形和线条。
   ```html
   <svg>
     <rect x="10" y="10" width="100" height="100" fill="blue"/>
     <circle cx="70" cy="70" r="40" fill="green"/>
     <line x1="0" y1="0" x2="100" y2="100" stroke="red" stroke-width="2"/>
   </svg>
   ```

3. **路径**：
   SVG中`<path>`元素用于定义复杂的路径，使用`d`属性来描述路径的指令。
   ```html
   <path d="M10 10 H 90 V 90 H 10 L 10 10" stroke="black" fill="transparent"/>
   ```

4. **文本和图像**：
   SVG也支持文本和图像的嵌入。
   ```html
   <svg>
     <text x="50" y="50" font-family="Verdana" font-size="15" fill="white" text-anchor="middle">SVG Text</text>
     <image xlink:href="image.png" x="0" y="0" height="100" width="100"/>
   </svg>
   ```

#### SVG图形和动画

1. **动画元素**：
   SVG支持`<animate>`和`<animateTransform>`等元素，可以直接在SVG中定义动画。
   ```html
   <svg>
     <circle cx="50" cy="50" r="40" fill="green">
       <animate attributeName="cx" from="50" to="150" dur="2s" repeatCount="indefinite" />
     </circle>
   </svg>
   ```

2. **SMIL动画**：
   SVG支持同步多媒体集成语言（SMIL），这是一种用于描述动画的标记语言。
   ```html
   <svg>
     <rect x="0" y="0" width="100" height="100">
       <animate attributeName="x" from="0" to="200" dur="5s" repeatCount="indefinite" />
     </rect>
   </svg>
   ```

3. **CSS动画**：
   可以使用CSS来为SVG元素添加动画效果。
   ```css
   circle {
     animation: move 2s infinite alternate;
   }
   @keyframes move {
     from {
       transform: translateX(0);
     }
     to {
       transform: translateX(100px);
     }
   }
   ```

4. **JavaScript动画**：
   通过JavaScript，可以动态地修改SVG元素的属性来创建动画。
   ```javascript
   var circle = document.querySelector('circle');
   var pos = 0;
   setInterval(function() {
     pos += 1;
     circle.setAttribute('cx', pos);
   }, 10);
   ```

SVG是一种强大的图形工具，它允许开发者在Web页面上创建和操作复杂的矢量图形。SVG的可伸缩性和清晰度使其成为Web图形和动画的理想选择，尤其是在需要高质量图形输出时。