在SVG中,可以直接将各种事件监听器添加到SVG shape 。
示例:
<!DOCTYPE html>
<html>
<body>
<svg width="500" height="150">
<rect x="10" y="10" width="100" height="75"
style="stroke: black; fill: silver; fill-opacity: .4;"
onmouseover="this.style.stroke = 'blue'; this.style['stroke-width'] = 5;"
onmouseout="this.style.stroke = 'green'; this.style['stroke-width'] = 1;"/>
</svg>
</body>
</html>
转换坐标系
- 使用
transform
属性,可以将图形移动到新位置。 也可以旋转或缩放图形。 必须将transform
属性添加到适当的SVG元素以转换坐标系。
上面示例代码,执行效果如下所示 -