IEでsvgタグ内のimageが表示されない

8550 ワード
JavaScript d3.js IE11 IE Chrome JavaScript テキストリンク

症状

Chromeで表示される画像が、IEで表示されない。

test.html
<!DOCTYPE html>
<html lang="ja" >
#ライブラリ読込などは省略
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
  <div class="test" ></div>
</body>
<script>
var svg = d3.select(".test").selectAll("svg").remove();
  svg = d3.select(".test").append("svg")
      .attr("width", 300).attr("height", 300)
      .attr("stroke-width", 2).attr("xmlns","http://www.w3.org/2000/svg");

svg.append('image').attr({
    'x' : careerCX,
    'y' : sides - radius * 0.3,
    'height' : 55,
    'xlink:href' : "./images/kamo.png"
   });

<script>
</html>

chromeでの表示

IEでの表示

何も出力されてねーじゃねーか。

対策

タグのプロパティに「width」追加したら出た。

test.html
#省略
<script>
var svg = d3.select(".test").selectAll("svg").remove();
  svg = d3.select(".test").append("svg")
      .attr("width", 300).attr("height", 300)
      .attr("stroke-width", 2).attr("xmlns","http://www.w3.org/2000/svg");

svg.append('image').attr({
    'x' : careerCX,
    'y' : sides - radius * 0.3,
    'height' : 300,
   'width':300,        #←追加
    'xlink:href' : "./images/kamo.png"
   });

</script>
</html>

IE②

学んだこと

chromeは足りない変数は明示的に補完してくれるけど、IEはなかったら「値無いからゼロにしとくわ（ドヤ）」って意地悪してくる。

愚痴

chromeの開発者ツールはSVGタグ内のコンテンツも選択できるけど、IEはそれができないからめっちゃ苦労した。