11

SVG パスに z-index を適用する方法はありますか?

私は単純なSVG矢印を持っています:

<svg class="arrow">
  <path class="line" />
  <path class="endpoint"/>
</svg>

css を使用して全体の z-index を変更すると、.arrowすべて正常に動作しますが、それを適用しようとする.endpointと動作しません。

これに対する解決策または回避策はありますか？

どうもありがとうございました。

4

3 に答える 3

16

SVG には z-index がなく、ペインター モデルを使用します。DOM からパスを削除し、その上にある必要がある要素の前と、その上にある必要がある要素の後に再度追加する必要があります。

あなたが発見したように、z-indexは完全な<svg>コンテンツでのみ機能します.htmlレンダラーは、SVGレンダラーに渡して内部SVGコンテンツを描画する前に、それがどのように配置されるかを制御します。

于 2013-11-13T16:28:43.363 に答える
-1

どうしても必要な場合は、別のフィルター効果を使用して明示的な合成順序を定義できます (Firefox または IE でのサポートが必要ない場合に限ります)。

于 2013-11-13T18:41:35.977 に答える