这是SVG系列目录：
- 前端必知必会 | 学SVG看这篇就够了（一）
- 前端必知必会 | 学SVG看这篇就够了（二）
- 前端必知必会 | 学SVG看这篇就够了（三）
- 前端必知必会 | 学SVG看这篇就够了（四）
- 前端必知必会 | 学SVG看这篇就够了（五）
- 前端必知必会 | 学SVG看这篇就够了（六）
- 前端必知必会 | 学SVG看这篇就够了（七）
- 前端必知必会 | 学SVG看这篇就够了（八）
- 前端必知必会 | 学SVG看这篇就够了（九）
- 前端必知必会 | 学SVG看这篇就够了（十）
- 前端必知必会 | 学SVG看这篇就够了（十一）
前言
SVG可以自定义引入图像文件（JPGE、PNG），也可以使用JavaScript进行操作SVG。让我们的SVG更加丰富。
image
image标签用于在SVG画布中插入图像文件，下面是一个在画布中插入图片的实例。
<!-- image -->
<svg width="200" height="200">
<image xlink:href="./img/pic.jpg" x="0" y="0" height="50px" width="50px"></image>
</svg>
<!-- img -->
<img src="./img/pic.jpg" alt="pic">
这个标签与HTML中的img标签一样，是引入图像文件，但是引入的方式不同，img是使用src属性来引入图像文件，而image标签需要通过xlink:href链接引入图像文件。在image你还需要指定一些属性，用于控制image标签。
| 属性 | 说明 |
|---|---|
| x、y | 设定图像标签在坐标系统的坐标点 |
| width、height | 设定图像标签宽度 / 高度 |
| xlink:href | 引用图像文件 |
| preserveAspectRatio | 设置图像比例（具体使用可参考第二章） |
javascript操作SVG
如果 SVG 代码直接写在 HTML 网页之中，它就成为网页 DOM 的一部分，可以直接用 DOM 操作。
我们看看这个例子：
<svg width="200" height="200">
<rect id="myRect" x="10" y="10" width="50" height="50" fill="red"></rect>
</svg>
<script>
const myRectDom = document.getElementById('myRect')
myRectDom.addEventListener('click', (e) => {
myRectDom.setAttribute('width', 80);
myRectDom.setAttribute('height', 80);
}, false);
</script>
<style>
#myRect {
transition: all 1s;
}
</style>
上面例子中，当我们点击矩形时，矩形的宽高从50*50过渡到80*80的的效果。
我们先是在rect标签中绑定一个ID值，在JavaScript中获取这个标签（DOM）。给rect标签绑定一个点击事件，让rect标签被点击时，使用setAttribute属性将宽高设置为80。为了有一个过渡效果，我给这个rect添加了动画，也就是transition: all 1s;这行代码。
最后
本篇文章讲述了SVG的关于image标签的使用与一个使用JavaScript操作SVG的例子，感谢你的阅读！
😀😀 关注我，不迷路！ 😀😀
