2 
<object id="edge-up" height="26px" width="208px" data="svg/edge-up.svg" type="image/svg+xml"></object>

$("#edge-up").hide('slow');

.hide('slow') で SVG オブジェクトを非表示にすることは可能ですか? 「遅い」オプションなしで正常に動作します。何か案が ？

4

2 に答える 2

2

jQuery は SVG 要素で使用できますが、HTML 要素の DOM インターフェースが SVG のインターフェースと異なる場合は理解しておく必要があります。これが、jQuery が、たとえば、fadeOut を使用して SVG 要素をアニメーション化したり、しようとしていたように非表示にしたりすることができない理由です。

非表示にするには、SVG 要素の表示属性を none に設定します。jQuery は SVG DOM インターフェースとインターフェースするように設計されていませんが、SVG 要素である DOM 要素を処理できます。

  $("#idOfSVGElement").attr("display", "none"); //will hide an element.
  $("#idOfSVGElement").removeAttr("display"); //will show it again.

改訂が必要: jQuery の失敗は、SVG 要素の style 属性を使用して非表示にしようとすることに起因しています。インターフェイスを実装するブラウザに関する限り、style='display:none' は SVG 要素には適用されません。

まとめ: SVG 要素と HTML 要素の DOM インターフェイスは異なります

これは、たとえば次のように、jQuery を使用して SVG 要素を作成できない理由でもあります。

 $("<rect>").attr( ...etc ...);

jQuery は SVG 要素ではなく HTML 要素名 rect を作成するためです。違いは、実装されている実際のインターフェースです! かっこいいでしょ？:)

于 2014-07-19T17:58:36.983 に答える