2014年4月5日土曜日

ChromeのSVGでGroupをクローンする時のこと

<svg width='480' height='160' viewbox='0 0 480 160'>
    <use id='use1' xlink:href='#g1' y='-50' />
    <g id='g1'>
        <use xlink:href='#rect1' x='120' y='80' fill='red' />
        <use xlink:href='#rect1' x='240' y='80' fill='blue' />
        <use xlink:href='#rect1' x='360' y='80' fill='green' />
    </g>
    <use xlink:href='#g1' y='50' />
    <rect id='rect1' x='-20' y='-20' width='40' height='40' />
</svg>

こんなのを埋め込んだ時、

Chrome

Firefox

Chromeは自分(#use1)より後ろにあるグループ(#g1)のクローンを表示してくれません。そのうち治ると思いますが。

確認のため試しに埋め込み

groupのみで、path類は大丈夫、たぶん。表示されない場合はこのあたりが関係しているかもしれません。