0

Chrome (FF、Safari ではない) では、外部リンク (xlink:href) SVG テンプレートのサブ要素をクラス/ID/要素参照でスタイル設定できません。

私が何か間違ったことをしているかどうか知りたいですか？他の誰かがこの問題に遭遇しましたか?

HTML:

<svg class="my-svg"><use xlink:href="demo.svg#my-icon" /></svg>

デモ.svg:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <symbol id="my-icon" viewBox="0 0 21 21">
    <title>Mobile Navigation Button</title>
    <path class="fml" fill="#BADA55" d="M27.493…"/>
  </symbol>
</svg>

CSS:

.my-svg { fill: pink; }     /* will work */
#my-icon { fill: brown; }   /* won’t work in Chrome */
.fml { fill: green; }       /* won’t work in Chrome */

より詳細なデモをここに投稿しました：

http://monopine.com/svg-demo/

4

1 に答える 1

0

CSS はファイルの境界を越えて適用されません。そのため、外部 SVG の要素を対象とする HTML の CSS は機能しません (または、少なくとも機能しないはずです)。したがって、ルール 2 と 3 (#my-iconおよび.fml) は機能しません。

ただし、<use>要素のコンテンツは参照元からスタイルを継承できます。したがって、ピンクの塗りつぶしを継承する必要があります.my-svg

于 2015-01-22T01:54:23.067 に答える