小さなエンドウ豆

まだまだいろいろ勉強中

Safari で SVG の画像が表示されない

SafariSVG の画像が表示されない

表題のまんま。
D3.js でこねこねした SVG 要素の中に image タグを用いて画像を扱う際になぜか Safari だけ表示されなかった。
D3.js のコードは以下のようなもの

svg.append('image')
            .attr("id", icon.name)
            .attr("href", IMAGE_PATH)
            .attr("class", "icon")
            .attr("x", x)
            .attr("y", y)
            .attr("width", ICON_WIDTH)
            .attr("height", ICON_HEIGHT)

解決策

Stack Overflow に同様の問題を抱えた人がいてその回答を試すことによって解決した。

stackoverflow.com

自分の場合は href の部分を xlink:href に変更することによってなんとか表示できた。
あとあと調べてみると Safari では SVG で href をサポートしていないらしい…
IE で辛い思いをしたことは多々あるが、Safari ではあまりないため、今後のためにも残しておこう。