写一段js实现在svg上画一个圆,边缘红色,填充黄色,鼠标点击边缘变绿,填充变蓝
时间: 2024-05-18 17:18:35 浏览: 15
好的,这是一个简单的实现:
```javascript
// 获取 SVG 元素
const svg = document.querySelector('svg');
// 创建圆形元素
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
circle.setAttribute('cx', '50');
circle.setAttribute('cy', '50');
circle.setAttribute('r', '40');
circle.setAttribute('stroke', 'red');
circle.setAttribute('stroke-width', '2');
circle.setAttribute('fill', 'yellow');
// 将圆形元素添加到 SVG 中
svg.appendChild(circle);
// 添加鼠标点击事件
circle.addEventListener('click', (event) => {
// 改变边缘颜色为绿色
circle.setAttribute('stroke', 'green');
// 改变填充颜色为蓝色
circle.setAttribute('fill', 'blue');
});
```
以上代码会在 SVG 中创建一个圆形元素,边缘为红色,填充为黄色。当用户点击圆形时,边缘颜色会变为绿色,填充颜色会变为蓝色。
相关问题
生成vue代码,实现使用svg画一条path路径,使用鼠标点击拖动可以沿着path拖动一个元素
好的,对于这个问题,我可以给你提供一段生成 Vue 代码的示例。首先,在你的 Vue 项目中,你需要安装 SVG 插件,可以使用如下命令:
```
npm install vue-svg-loader --save-dev
```
接下来,在你的 Vue 组件中,你可以使用如下代码来生成一条 path 路径和一个可拖动的元素:
```
<template>
<div>
<svg viewBox="0 0 100 100">
<path d="M10,10 L90,90" stroke="black" stroke-width="2" fill="none" ref="path" />
<circle cx="10" cy="10" r="5" fill="blue" v-draggable />
</svg>
</div>
</template>
<script>
export default {
directives: {
draggable: {
inserted: function (el) {
var path = el.parentNode.querySelector('path');
var pathLength = path.getTotalLength();
var startOffset = path.getPointAtLength(0);
var endOffset = path.getPointAtLength(pathLength);
var bbox = el.getBBox();
var startX = bbox.x + bbox.width/2;
var startY = bbox.y + bbox.height/2;
var transform = el.getAttribute('transform');
transform = transform ? transform + ' ' : '';
el.setAttribute('transform', transform + 'translate(' + startX + ',' + startY + ')');
var drag = function (e) {
var x = e.clientX - el.offsetLeft;
var y = e.clientY - el.offsetTop;
var angle = Math.atan2(endOffset.y - startOffset.y, endOffset.x - startOffset.x);
var offset = Math.min(Math.max(0, (x - startX) * Math.cos(angle) + (y - startY) * Math.sin(angle)), pathLength);
var point = path.getPointAtLength(offset);
el.setAttribute('transform', transform + 'translate(' + point.x + ',' + point.y + ')');
};
el.addEventListener('mousedown', function (e) {
el.classList.add('dragging');
document.addEventListener('mousemove', drag);
});
el.addEventListener('mouseup', function (e) {
el.classList.remove('dragging');
document.removeEventListener('mousemove', drag);
});
}
}
}
}
</script>
```
这段代码中,我们首先在 SVG 中创建了一个 path 路径,并设置了其 stroke 和 stroke-width 属性,然后创建了一个圆形元素,并添加了 v-draggable 指令,用于实现拖动功能。
在 directive 中,我们首先获取 path 路径的长度和开始结束点的坐标,以及圆形元素的起始位置。然后在鼠标拖动时,根据鼠标位置计算出当前所在的 path 路径位置,并使用 path.getPointAtLength() 方法获取该位置的坐标,最后将圆形元素移动到该位置即可。
希望这个示例对你有帮助!
使用svg画两个小空心圆圈从上而下用一条线连接
好的,以下是使用SVG画两个小空心圆圈从上而下用一条线连接的代码:
```html
<svg width="100" height="100">
<circle cx="50" cy="25" r="10" fill="none" stroke="blue" stroke-width="2" />
<circle cx="50" cy="75" r="10" fill="none" stroke="red" stroke-width="2" />
<line x1="50" y1="25" x2="50" y2="75" stroke="black" stroke-width="2" />
</svg>
```
这个代码会在SVG区域内画一个蓝色空心圆圈和一个红色空心圆圈,分别位于SVG区域的上方和下方中心位置。圆圈的半径为10,填充颜色为none,边框颜色为蓝色和红色,边框宽度为2。两个圆圈之间使用一条黑色线连接,线的宽度为2。你可以根据需要修改圆圈的颜色、大小和位置,也可以修改线的颜色和宽度。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)