Safari で SVG の画像が表示されない
表題のまんま。
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 に同様の問題を抱えた人がいてその回答を試すことによって解決した。
自分の場合は href
の部分を xlink:href
に変更することによってなんとか表示できた。
あとあと調べてみると Safari では SVG で href をサポートしていないらしい…
IE で辛い思いをしたことは多々あるが、Safari ではあまりないため、今後のためにも残しておこう。