1

私は、CSS-tricks.com で Chris Coier の SVG トリックを見ていました。また、最近カンファレンスで彼を見かけ、SVG の能力と、すべてのアセットを 1 つの外部 svg ファイルに保持する方法について話しました。

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">

  <symbol id="beaker" viewBox="214.7 0 182.6 792">
    <!-- <path>s and whatever other shapes in here -->  
  </symbol>

  <symbol id="shape-icon-2" viewBox="0 26 100 48">
    <!-- <path>s and whatever other shapes in here -->  
  </symbol>

</svg>

次に、次のように使用できます。

<svg class="icon">
  <use xlink:href="#shape-icon-1" />
</svg>

<svg class="icon">
  <use xlink:href="#shape-icon-2" />
</svg>

いいね！しかし、SVG が HTMl でインライン化されている場合に通常行うように、各シンボルの個々のノードにアクセスし、CSS でそれらを変更できるようにしたいと考えています。

この CodePen を見てみましょう: http://codepen.io/chriscoyier/pen/Hwcxp

私はこれを行うことができると思っていましたが、動作させることができません:

.icon path{
  fill: green;
}

これは行いますが、これにより実際のソース svg が変更されます

#beaker path {
 fill: green;
}

私がやりたいのは、グリッド内のグラフィック要素を再利用することです。ホバーすると、svg のノードが変更されます。ただし、その特定の親のノードでのみ。それらのすべてではありません。

4

1 に答える 1

-2

Firefox は、この方法でスタイルを設定できる未知のことを行います。
編集:

より正確に言うと:
Firefox は、そのシンボルを DOM でちょっと変えているようです。 http://codepen.io/Type-Style/pen/EaGbam

.hoverME:hover path, .hoverME:hover circle  {
  fill: red;  
}

これは、外部ファイルでも機能します。(残念ながら crossDomain Files には対応していません)

「しかし、パスのクラス名だけを挿入することはできます。それは機能します。」つまり、セレクターを使用して SVG 内にとどまっている限り、機能します。

 circle:hover, path:hover {
  fill: red;  
}
于 2015-03-19T12:42:14.507 に答える