JavaScript 经典实例：第三版

400

｜

第

15

章

//

获取并修改

SVG

元素

const

square = svgdoc.getElementById('square');

square.onclick =

function

() {

let

width = parseFloat(square.getAttribute('width'));

width -= 50;

square.setAttribute('width', width);

const

color = square.getAttribute('fill');

if

(color == 'blue') {

square.setAttribute('fill', 'yellow');

square.setAttribute('stroke', 'green');

}

else

{

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

square.setAttribute('stroke', 'red');

}

};

};

</script>

</body>

在上述例程代码中，加载

object

元素后获取它的引用，然后在

object.onload

事

件处理函数中访问

SVG

文档，随后为一个元素赋予

onclick

事件处理函数。

15.3

使用

D3

库创建一个

SVG

条形图

15.3.1

问题

你想创建一个可缩放的条形图，但是你不愿意自己动手一点一点绘制。