我想给svg画不里的某一个元素加事件
时间: 2024-02-17 14:05:32 浏览: 30
如果你想给 SVG 画布中的某一个元素添加事件,你可以使用 SVG.js 提供的 `get()` 方法获取该元素,并在该元素上添加事件。以下是一个示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>SVG.js Demo with Event on Element</title>
<script src="https://cdn.jsdelivr.net/npm/svg.js@3.1.0/dist/svg.min.js"></script>
<style>
#drawing {
border: 1px solid black;
}
</style>
</head>
<body>
<div id="drawing"></div>
<script>
var draw = SVG().addTo('#drawing').size(300, 300);
var rect = draw.rect(100, 100).move(50, 50).attr({fill: '#f06'});
var text = draw.text('Hello, SVG!').move(20, 20);
rect.on('click', function() {
this.fill({color: '#0f6'});
});
text.get(0).on('mouseover', function() {
this.fill({color: '#00f'});
});
text.get(0).on('mouseout', function() {
this.fill({color: '#000'});
});
</script>
</body>
</html>
```
上面的代码在 SVG 画布中添加了一个矩形元素和一个文本元素,并为它们分别添加了 `click`、`mouseover` 和 `mouseout` 事件监听器。在事件监听器函数中,`this` 分别表示当前的矩形或文本元素。在文本元素中,使用 `get(0)` 方法获取了该元素的第一个子元素,即文本节点,然后为其添加了 `mouseover` 和 `mouseout` 事件监听器。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)