【前端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的例子，感谢你的阅读！

这篇好文章是转载于：学新通技术网