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="开始" onclick="start()" />
<input type="button" value="停止" onclick="stop()" />
试试看 »
代码解释
start()和stop()函数启动和停止动画- 动画通过设置一个计时器 (t) 来启动，该计时器使用
setInterval()函数每 20 毫秒调用一次animate()函数 - 动画通过清除 t 计时器来停止
- 动画在
animate()函数内执行 - 使用
getElementById()函数获取对<circle>元素的引用 - 使用
getAttribute()函数获取cx属性的值 - 使用
parseInt()将cx属性的值转换为数字。然后在cx值中添加 2 - 测试
newCX值是否大于 600（这是 SVG “窗口” 的宽度），然后将其重置为 50（这是原始起始位置） - 使用
setAttribute()函数将newCX值放入<circle>元素的cx属性中。这将圆形移动到新的 cx 位置
