是否可以在svg節點上應用css轉換？如果是，如何？

比方說，我有一個簡單的圓圈，我想用CSS來縮放它。這種交互將通過監聽圓上的點擊事件並以某種方式向其添加CSS類（結束幀動畫類）來完成。此元素是否可以在svg節點上應用css轉換？如果是，如何？

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <circle class='main-circle' cx="100" cy="50" r="40" 
     stroke="black" stroke-width="2" fill="red"/> 
</svg>

類名稱爲：

circleNode[0].className // SVGAnimatedString {animVal: "main-circle", baseVal: "main-circle"}

jQuery的嘗試在這裏：

http://jsfiddle.net/EHfej/

jQuery將不會在這種情況下（參見錯誤http://bugs.jquery.com/ticket/10329）工作。帶有普通節點節點的className也不起作用。

我的猜測是，即使jQuery不支持SVG上的類操作，它仍應該是可能的。

來源

2012-12-15 Vlad Nicula

你的問題是什麼？如何通過JavaScript訪問特定的SVG元素以添加類屬性或如何使用CSS在SVG中進行轉換？ – feeela

我的問題是如何添加/刪除SVG元素上的一個類（或多個），以及如果添加具有css3 transform屬性的類將爲節點設置動畫效果。 –

是的，這是可能的，但請注意，並非所有屬性都適用於svg元素。特別是因爲您似乎對transform感興趣，您應該知道，這可能還不適用於svg元素的所有瀏覽器。如果該房產被列爲required in SVG 1.1，那麼它現在在瀏覽器中有更高的概率。

要設置在SVG內容的類：

elm.className.baseVal = "yourclass";

，或者使用的setAttribute：

elm.setAttribute("class", "yourclass");

Firefox和Opera還支持HTML5 classList上SVG元素：

elm.classList.add("yourclass");

一些例子可以發現here。

來源

2012-12-16 12:01:43

謝謝，動畫矩形的例子就是我一直在尋找的東西。 –

是否可以在svg節點上應用css轉換？如果是，如何？

回答

相關問題