5. 标签
标签用于绘制矩形。
<svg>
<rect></rect>
</svg>
ログイン後にコピー
的x属性和y属性，指定了矩形左上角端点的横坐标和纵坐标；width属性和height属性指定了矩形的宽度和高度（单位像素）。
6. 标签
标签用于绘制椭圆。
<svg>
<ellipse></ellipse>
</svg>
ログイン後にコピー
的cx属性和cy属性，指定了椭圆中心的横坐标和纵坐标（单位像素）；rx属性和ry属性，指定了椭圆横向轴和纵向轴的半径（单位像素）。
7. 标签
标签用于绘制多边形。
<svg>
<polygon></polygon>
</svg>
ログイン後にコピー
的points属性指定了每个端点的坐标，横坐标与纵坐标之间与逗号分隔，点与点之间用空格分隔。
8. 标签
标签用于制路径。
<svg>
<path></path>
</svg>
ログイン後にコピー
的d属性表示绘制顺序，它的值是一个长字符串，每个字母表示一个绘制动作，后面跟着坐标。
M：移动到（moveto）
L：画直线到（lineto）
Z：闭合路径
9. 标签
标签用于绘制文本。
<svg>
<text>肆客足球</text>
</svg>
ログイン後にコピー
的x属性和y属性，表示文本区块基线（baseline）起点的横坐标和纵坐标。文字的样式可以用class或style属性指定。
10.
<svg>
<circle></circle>
<use></use>
<use></use>
</svg>
ログイン後にコピー
11. 标签
标签用于将多个形状组成一个组（group），方便复用。
<svg>
<g>
<text>圆形</text>
<circle></circle>
</g>
<use></use>
<use></use>
</svg>
ログイン後にコピー
12. 标签
标签用于自定义形状，它内部的代码不会显示，仅供引用。
<svg>
<defs>
<g>
<text>圆形</text>
<circle></circle>
</g>
</defs>
<use></use>
<use></use>
<use></use>
</svg>
ログイン後にコピー
13. 标签
标签用于自定义一个形状，该形状可以被引用来平铺一个区域。
<svg>
<defs>
<pattern>
<circle></circle>
</pattern>
</defs>
<rect></rect>
</svg>
ログイン後にコピー
上面代码中，标签将一个圆形定义为dots模式。patternUnits="userSpaceOnUse"表示的宽度和长度是实际的像素值。然后，指定这个模式去填充下面的矩形。
14. 标签
标签用于插入图片文件。
<svg>
<image></image>
</svg>
ログイン後にコピー
上面代码中，的xlink:href属性表示图像的来源。
15. 标签
标签用于产生动画效果。
<svg>
<rect>
<animate></animate>
</rect>
</svg>
ログイン後にコピー
上面代码中，矩形会不断移动，产生动画效果。
的属性含义如下。
attributeName：发生动画效果的属性名。
from：单次动画的初始值。
to：单次动画的结束值。
dur：单次动画的持续时间。
repeatCount：动画的循环模式。
可以在多个属性上面定义动画。
<animate></animate>
<animate></animate>
ログイン後にコピー
16. 标签
标签对 CSS 的transform属性不起作用，如果需要变形，就要使用标签。
<svg>
<rect>
<animatetransform></animatetransform>
</rect>
</svg>
ログイン後にコピー
上面代码中，的效果为旋转（rotate），这时from和to属性值有三个数字，第一个数字是角度值，第二个值和第三个值是旋转中心的坐标。from="0
200 200"表示开始时，角度为0，围绕(200, 200)开始旋转；to="360 400
400"表示结束时，角度为360，围绕(400, 400)旋转。
JavaScript 操作SVG
1. DOM操作
如果 SVG 代码直接写在 HTML 网页之中，它就成为网页 DOM 的一部分，可以直接用 DOM 操作。
<svg>
<circle></circle>
<svg></svg></svg>
ログイン後にコピー
上面代码插入网页之后，就可以用 CSS 定制样式。
circle {
stroke-width: 5;
stroke: #f00;
fill: #ff0;
}
circle:hover {
stroke: #090;
fill: #f8f8f8;
}ログイン後にコピー
然后，可以用 JavaScript 代码操作 SVG。
var mycircle = document.getElementById('mycircle');
mycircle.addEventListener('click', function(e) {
console.log('circle clicked - enlarging');
mycircle.setAttribute('r', 60);
}, false);ログイン後にコピー
上面代码指定，如果点击图形，就改写circle元素的r属性。
2. 获取 SVG DOM
使用<object></object>、<iframe></iframe>、<embed></embed>标签插入 SVG 文件，可以获取 SVG DOM。
var svgObject = document.getElementById('object').contentDocument;
var svgIframe = document.getElementById('iframe').contentDocument;
var svgEmbed = document.getElementById('embed').getSVGDocument();ログイン後にコピー
注意，如果使用<img alt="HTML5 での SVG の使用方法 (コード例)" >标签插入 SVG 文件，就无法获取 SVG DOM。
3. 读取 SVG 源码
由于 SVG 文件就是一段 XML 文本，因此可以通过读取 XML 代码的方式，读取 SVG 源码。
<p>
<svg>
<!-- svg code -->
</svg>
</p>
ログイン後にコピー
使用XMLSerializer实例的serializeToString()方法，获取 SVG 元素的代码。
var svgString = new XMLSerializer()
.serializeToString(document.querySelector('svg'));ログイン後にコピー
4. SVG 图像转为 Canvas 图像
首先，需要新建一个Image对象，将 SVG 图像指定到该Image对象的src属性。
var img = new Image();
var svg = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"});
var DOMURL = self.URL || self.webkitURL || self;
var url = DOMURL.createObjectURL(svg);
img.src = url;ログイン後にコピー
然后，当图像加载完成后，再将它绘制到<canvas></canvas>元素。
img.onload = function () {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
};ログイン後にコピー
小结
SVG能做的远不止这些，利用SVG做的动画效果，文字效果我们以后给大家详细讲解，今天就先到这里吧。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
