SVG事件监听器

在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元素以转换坐标系。

上面示例代码,执行效果如下所示 -


上一篇: SVG脚本(JavaScript) 下一篇: SVG模糊效果