1

単純な円があり、CSSを使用して拡大縮小したいとします。この相互作用は、円のクリックイベントをリッスンし、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を参照）。プレーンなdomノードを持つclassNameも機能しません。

私の推測では、jQueryはSVGでのクラス操作をサポートしていませんが、それでも可能であるはずです。

4

1 に答える 1

3

はい、可能ですが、すべてのプロパティが svg 要素に適用されるわけではないことに注意してください。特に、あなたが興味を持っているように見えるのでtransform、これは svg 要素のすべてのブラウザーでまだ機能しない可能性があることに注意する必要があります。プロパティがSVG 1.1 で必須としてリストされている場合、現在のブラウザーで機能する可能性が高くなります。

SVG コンテンツでクラスを設定するには:

elm.className.baseVal = "yourclass";

または setAttribute を使用します。

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

Firefox と Opera は、svg 要素でHTML5 classListもサポートしています。

elm.classList.add("yourclass");

いくつかの例はここにあります。

于 2012-12-16T12:01:43.043 に答える