怎么使用JavaScript操作SVG元素？-js教程-PHP中文网

怎么使用JavaScript操作SVG元素？

夢幻星辰

发布： 2025-09-16 23:02:01

原创

334人浏览过

JavaScript操作SVG元素需通过DOM API进行增删改查，核心是使用getElementById、querySelector等方法获取元素，利用setAttribute修改属性（如fill、stroke、transform），创建元素时需用createElementNS指定SVG命名空间，删除则调用remove或removeChild。常用可操作属性包括x、y、cx、cy、r、width、height、fill、stroke、stroke-width、transform和opacity。事件处理与HTML一致，使用addEventListener绑定click、mouseover等事件，支持事件对象参数。动画可通过CSS transition或animation实现简单效果，也可用JavaScript的requestAnimationFrame控制帧动画，或使用SVG内置动画元素如<animate>、<animateTransform>定义属性变化、时间与重复。内联SVG支持HTML式事件绑定，外部引入则必须用addEventListener。

怎么使用javascript操作svg元素？

JavaScript操作SVG元素，核心在于利用DOM API对SVG文档对象模型进行增删改查。简单来说，就是把SVG当成HTML一样操作，只不过标签和属性不一样罢了。

解决方案

JavaScript操作SVG，其实就是操作XML。要操作SVG元素，首先得获取到它。这跟操作HTML元素一样，可以用

document.getElementById

登录后复制

，

document.querySelector

登录后复制

，

document.querySelectorAll

登录后复制

等等。

假设我们有这样一个SVG：

立即学习“Java免费学习笔记（深入）”；

<svg width="200" height="200">
  <circle id="myCircle" cx="100" cy="100" r="50" fill="red" />
</svg>

登录后复制

我们可以这样获取到这个圆形：

const circle = document.getElementById('myCircle');

登录后复制

获取到元素之后，就可以修改它的属性了。比如，修改圆形的颜色：

circle.setAttribute('fill', 'blue');

登录后复制

也可以修改圆形的半径：

circle.setAttribute('r', '75');

登录后复制

创建新的SVG元素也很简单，用

document.createElementNS

登录后复制

方法，注意要指定SVG的命名空间。

const svgNS = "http://www.w3.org/2000/svg";
const newCircle = document.createElementNS(svgNS, 'circle');
newCircle.setAttribute('cx', '50');
newCircle.setAttribute('cy', '50');
newCircle.setAttribute('r', '25');
newCircle.setAttribute('fill', 'green');

// 将新圆形添加到SVG中，假设SVG的id是mySVG
const svg = document.getElementById('mySVG');
svg.appendChild(newCircle);

登录后复制

删除SVG元素也很直接：

circle.remove(); // 直接移除元素
// 或者
circle.parentNode.removeChild(circle); // 通过父节点移除

登录后复制

总而言之，JavaScript操作SVG元素，就是DOM操作那一套，关键在于理解SVG的结构和属性。记住，SVG有自己的命名空间，创建元素的时候要用

createElementNS

登录后复制

。

SVG元素有哪些常用的属性可以操作？

SVG元素有很多属性可以操作，常见的有：

```
x
```
登录后复制
,
```
y
```
登录后复制
: 元素的坐标，比如矩形的左上角坐标。
```
width
```
登录后复制
,
```
height
```
登录后复制
: 元素的宽度和高度，比如矩形、图像等。
```
cx
```
登录后复制
,
```
cy
```
登录后复制
,
```
r
```
登录后复制
: 圆形的中心坐标和半径。
```
x1
```
登录后复制
,
```
y1
```
登录后复制
,
```
x2
```
登录后复制
,
```
y2
```
登录后复制
: 线段的起始点和结束点坐标。
```
fill
```
登录后复制
: 填充颜色。
```
stroke
```
登录后复制
: 描边颜色。
```
stroke-width
```
登录后复制
: 描边宽度。
```
transform
```
登录后复制
: 变换属性，可以进行平移、旋转、缩放等操作。
```
opacity
```
登录后复制
: 透明度。

这些属性都可以通过

setAttribute

登录后复制

方法来修改。例如，要让一个矩形旋转45度，可以这样写：

const rect = document.getElementById('myRect');
rect.setAttribute('transform', 'rotate(45)');

登录后复制

需要注意的是，

transform

登录后复制

属性可以接受多个变换，比如先平移再旋转：

PPT.CN,PPTCN,PPT.CN是什么,PPT.CN官网,PPT.CN如何使用

一键操作，智能生成专业级PPT

查看详情

rect.setAttribute('transform', 'translate(10, 20) rotate(45)');

登录后复制

此外，还可以使用

classList

登录后复制

来添加或删除CSS类，从而控制SVG元素的样式。

如何处理SVG元素的事件？

处理SVG元素的事件，跟处理HTML元素的事件没什么区别，都是用

addEventListener

登录后复制

方法。

const circle = document.getElementById('myCircle');

circle.addEventListener('click', function(event) {
  console.log('圆形被点击了！');
  // 改变圆形的颜色
  circle.setAttribute('fill', 'yellow');
});

登录后复制

常见的SVG事件有：

```
click
```
登录后复制
: 点击事件。
```
mouseover
```
登录后复制
: 鼠标移入事件。
```
mouseout
```
登录后复制
: 鼠标移出事件。
```
mousedown
```
登录后复制
: 鼠标按下事件。
```
mouseup
```
登录后复制
: 鼠标抬起事件。

事件对象

event

登录后复制

包含了事件的详细信息，比如鼠标的坐标、按下的键等等。

需要注意的是，如果SVG是在HTML中内联的，那么事件处理函数可以直接写在HTML标签中，就像这样：

<svg width="200" height="200">
  <circle id="myCircle" cx="100" cy="100" r="50" fill="red" onclick="changeColor(this)" />
</svg>

<script>
  function changeColor(circle) {
    circle.setAttribute('fill', 'yellow');
  }
</script>

登录后复制

但是，如果SVG是作为外部文件引入的，那么这种方式就不行了，只能用

addEventListener

登录后复制

方法来绑定事件。

SVG动画怎么实现？

SVG动画可以通过CSS动画、JavaScript动画，或者SVG自带的动画元素来实现。

CSS动画： 可以通过CSS的
```
transition
```
登录后复制
和
```
animation
```
登录后复制
属性来实现简单的动画效果。比如，让一个圆形在鼠标悬停时变大：

<svg width="200" height="200">
  <circle id="myCircle" cx="100" cy="100" r="50" fill="red" class="animated-circle" />
</svg>

<style>
  .animated-circle {
    transition: r 0.3s ease-in-out;
  }

  .animated-circle:hover {
    r: 75;
  }
</style>

登录后复制

JavaScript动画： 可以通过
```
requestAnimationFrame
```
登录后复制
方法来实现更复杂的动画效果。这种方式可以更精细地控制动画的每一帧。
SVG动画元素： SVG自带了一些动画元素，比如
```
<animate>
```
登录后复制
,
```
<animateTransform>
```
登录后复制
,
```
<animateMotion>
```
登录后复制
等等。这些元素可以用来定义动画的起始值、结束值、持续时间、缓动函数等等。

例如，让一个矩形在5秒内从左向右移动：

<svg width="200" height="100">
  <rect x="0" y="25" width="50" height="50" fill="blue">
    <animate attributeName="x" from="0" to="150" dur="5s" repeatCount="indefinite" />
  </rect>
</svg>

登录后复制