鍍金池/ 教程/ HTML/ SVG事件監(jiān)聽器
SVG鏈接
SVG陰影效果
SVG線性漸變
SVG文本
SVG平面陰影
SVG圖表
SVG交互
SVG時鐘
SVG漸變
SVG <pattern>元素
SVG簡介
SVG徑向漸變
SVG <filter>元素
SVG對話框效果
SVG形狀
SVG stroke屬性
SVG圖形
SVG教程
SVG事件監(jiān)聽器
SVG加載器示例
SVG腳本(JavaScript)
SVG圖標(biāo)
SVG拖動
SVG模糊效果

SVG事件監(jiān)聽器

在SVG中，可以直接將各種事件監(jiān)聽器添加到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>

轉(zhuǎn)換坐標(biāo)系

  • 使用transform屬性，可以將圖形移動到新位置。 也可以旋轉(zhuǎn)或縮放圖形。 必須將transform屬性添加到適當(dāng)?shù)腟VG元素以轉(zhuǎn)換坐標(biāo)系。

上面示例代碼，執(zhí)行效果如下所示 -


上一篇：SVG交互下一篇：SVG鏈接