0

私が達成する必要があるコンセプトは、さまざまな要素を瞬間的に強調することです。ハイライトとは、色などのいくつかの側面を変更することを意味します。

g (グループ)要素内にいくつかのSVG 要素があります。これらの各内部要素には、保持したい独自の css スタイル (色、境界線など) があります。特定のイベントの要素のグループ全体を強調表示してから、元の状態に戻します。

元の状態を保存し、それぞれにスタイルの変更を適用してから、元の状態から復元することで上記を実現できますが、それほど迅速でエレガントではないようです。

私が考えていたのは、 gコンテナー要素に適用できるフィルターオプションがいくつかあるということです。これにより、フィルターを適用してから削除すると、すべての内部要素が正常に表示されます。

私が持っている要素の例:

<g>
     <rect x="0" y="0" rx="5" width="100" height="60" style="stroke: green; stroke-width: 2; fill: yellow;">
     <rect x="20" y="20" rx="5" width="10" height="10" style="stroke: green; stroke-width: 2; fill: yellow;">
</g>
4

1 に答える 1

3

これにはCSSを使用することをお勧めします。属性を削除して、style適切なクラス/ID をいくつか導入できます (この簡単な例にはクラスを追加しませんでした)。

<svg>
  <style type="text/css">
    g:hover rect:first-child {
      fill:red; stroke:blue;
    }

    g:hover rect {
      fill:green;
    }

    rect {
      stroke: green; 
      stroke-width: 2; 
      fill: yellow;
    }

  </style>
  <g>
    <rect x="0" y="0" rx="5" width="100" height="60"/>
    <rect x="20" y="20" rx="5" width="10" height="10"/>
  </g>
</svg>

jsFiddle を試す

于 2013-04-12T15:43:41.773 に答える