SVG 脚本
SVG + JavaScript
SVG 可以与 JavaScript 一起使用来修改和动画化 SVG 元素。
SVG 简单脚本
在此示例中，我们创建了一个半径为 25 的红色圆。单击按钮将半径更改为 50
这是 SVG 代码
示例
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<circle id="circle1" cx="50" cy="50" r="25" style="fill:red;" />
</svg>
<input type="button" value="更改半径" onclick="changeRadius()" />
<script>
function changeRadius() {
document.getElementById("circle1").setAttribute("r", "50");
}
</script>
自己动手试一试 »
代码解释
- 在
<circle>元素中添加一个id属性 - 在
<script>标签内创建一个脚本 - 使用
getElementById()函数获取对 SVG 元素的引用 - 使用
setAttribute()函数更改r属性 - 添加一个
<input type="button">元素，以便在单击时运行 JavaScript
SVG 更改 CSS
在此示例中，我们创建了一个红色圆。单击按钮将填充颜色更改为绿色
这是 SVG 代码
示例
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<circle id="circle2" cx="50" cy="50" r="25" style="fill:red;" />
对不起，您的浏览器不支持内嵌 SVG。
</svg>
<input type="button" value="更改样式" onclick="changeStyle()" />
<script>
function changeStyle() {
document.getElementById("circle2").style.fill="green";
}
</script>
自己动手试一试 »
代码解释
- 在
<circle>元素中添加一个id属性 - 在
<script>标签内创建一个脚本 - 使用
getElementById()函数获取对 SVG 元素的引用 - 使用
style.fill设置新的填充颜色 - 添加一个
<input type="button">元素，以便在单击时运行 JavaScript
SVG 更改属性值和 CSS
在此示例中，我们创建了一个红色圆。单击按钮可更改半径、x 位置、填充颜色，并添加描边颜色
这是 SVG 代码
示例
<svg width="200" height="120" xmlns="http://www.w3.org/2000/svg">
<circle id="circle3" cx="50" cy="60" r="25" style="fill:red;" />
</svg>
<input type="button" value="更改圆" onclick="changeMe()" />
<script>
function changeMe() {
var c = document.getElementById("circle3");
c.setAttribute("r", "50");
c.setAttribute("cx", "150");
c.style.fill="green";
c.style.stroke="red";
}
</script>
自己动手试一试 »
SVG 动画脚本
在此示例中，我们创建了一个红色圆。单击两个按钮可启动和停止动画
这是 SVG 代码
示例
<svg width="600" height="100" xmlns="http://www.w3.org/2000/svg">
<circle id="circle4" cx="50" cy="50" r="50" style="fill:red;" />
</svg>
<script>
var t = null;
function start() {
if(t == null) {
t = setInterval(animate, 20);
}
}
function stop() {
if(t != null) {
clearInterval(t);
t = null;
}
}
function animate() {
var circle = document.getElementById("circle4");
var cx = circle.getAttribute("cx");
var newCX = 2 + parseInt(cx);
if(newCX > 600) {
newCX = 50;
}
circle.setAttribute("cx", newCX);
}
</script>
<br/>
<input type="button" value="Start" onclick="start()" />
<input type="button" value="Stop" onclick="stop()" />
自己动手试一试 »
代码解释
start()和stop()函数启动和停止动画- 动画通过设置一个定时器 (t) 开始，该定时器使用
setInterval()函数每 20 毫秒调用一次animate()函数 - 通过清除 t 定时器来停止动画
- 动画在
animate()函数内部执行 - 使用
getElementById()函数获取对<circle>元素的引用 - 使用
getAttribute()函数获取cx属性的值 - 使用
parseInt()将cx属性的值转换为数字。然后将 2 加到cx值上 - 测试
newCX值是否大于 600（这是 SVG “窗口”的宽度），然后将其重置为 50（这是原始的起始位置） - 使用
setAttribute()函数将newCX值放入<circle>元素的cx属性中。这将圆移动到新的 cx 位置
