svgのurlにハッシュ付けてターゲット擬似クラスを利用してスタイルを切り替える

2016.01.17現在

safariで上手くいかない。
backgroundはSafariとChromeで上手くいかない。
objectタグはどの環境でも上手くいったが、重いし、objectタグのdataにハッシュ付けたURL入れるとスクロールが反応しちゃう。

デモ http://jsdo.it/ksk1015/gAoi

svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
    <style id="red">#red:target ~ * {fill: red;}</style>
    <style id="blue">#blue:target ~ * {fill: blue;}</style>
    <style id="green">#green:target ~ * {fill: green;}</style>
    <circle cx="100" cy="100" r="100"></circle>
</svg>

html

<h2>imgタグ</h2>
<p><img src="http://jsrun.it/assets/a/L/3/B/aL3BS"> デフォルト</p>
<p><img src="http://jsrun.it/assets/a/L/3/B/aL3BS#red"> #red</p>
<p><img src="http://jsrun.it/assets/a/L/3/B/aL3BS#blue"> #blue</p>
<p><img src="http://jsrun.it/assets/a/L/3/B/aL3BS#green"> #green</p>

<h2>objectタグ</h2>
<p><object type="image/svg+xml" data="http://jsrun.it/assets/a/L/3/B/aL3BS"></object> デフォルト</p>
<p><object type="image/svg+xml" data="http://jsrun.it/assets/a/L/3/B/aL3BS#red"></object> #red</p>
<p><object type="image/svg+xml" data="http://jsrun.it/assets/a/L/3/B/aL3BS#blue"></object> #blue</p>
<p><object type="image/svg+xml" data="http://jsrun.it/assets/a/L/3/B/aL3BS#green"></object> #green</p>

<h2>css background</h2>
<p><span class="svg"></span> デフォルト</p>
<p><span class="svg svg-red"></span> #red</p>
<p><span class="svg svg-blue"></span> #blue</p>
<p><span class="svg svg-green"></span> #green</p>

以下、検証詳細

OS X El Capitan
Safari 9.01 : objectのみok.
Chrome 47.0 : img, objectはOK. backgroundはNG.
Firefox 43.0.4 : img, object, backgroundともに全部OK.

Windows 10
Edge : img, object, backgroundともに全部OK.

Windows7
IE11 : img, object, backgroundともに全部OK.

Android 6
Chrome 47.0 : img, objectはOK. backgroundはNG.

iOS 9.2
Safari : objectのみok.