use要素で参照された要素の振る舞いについて

<svg viewBox="0 0 200 120" width="200" height="120" display="none">
<defs>
	<g id="maru01">
		<circle cx="100" cy="60" r="50" stroke-width="0"/>
	</g>
	<symbol id="maru02" viewBox="0 0 200 120">
		<circle cx="100" cy="60" r="50" stroke-width="0" id="maru03"/>
	</symbol>
</defs>
</svg>

<svg viewBox="0 0 200 360" width="200" height="360">
	<!-- use要素でg要素を参照した場合 -->
	<use class="useElm01" xlink:href="#maru01" x="0" y="0"/>
	<!-- use要素でsymbol要素を参照した場合 -->
	<use class="useElm02" xlink:href="#maru02" x="0" y="120" width="200" height="120"/>
	<!-- use要素でcircle要素を参照した場合 -->
	<use class="useElm03" xlink:href="#maru03" x="0" y="240"/>
</svg>

svg circle{
	fill: inherit;
}
.useElm01 circle{
	fill: red;
}
.useElm02 circle{
	fill: blue;
}
.useElm03 circle{
	fill: green;
}

こうした設定でuse要素から参照した場合、Chrome/Safari/IEでは色の指定は適用されませんが、FirefoxではCSSで指定した色が適用されます。

Firefoxでは他のブラウザと異なりuse要素以下に要素が複製されているように振る舞います。use要素における挙動の違いについてはこちらの記事が詳しいです。

svgにおけるuse要素の動作について - ゲームミュージックと生存確認をかねた画期的な