1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

IE11は、SVGのpath要素のd属性を勝手に書き換えるから気をつけろ

Posted at

たとえば、以下のようなSVGがありました。

<svg id="item" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
  <path d="M10,10,C20,20,40,20,50,10"/>
</svg>

この中のpath要素をJavaScriptで処理したい。d属性値を取得してみます。

document.getElementById('item').querySelector('path').getAttribute('d')
//-> M10,10,C20,20,40,20,50,10

と思うよね。

ところが、IEは違いました。

M 10 10 C 20 20 40 40 40 20 50

ファッ!? カンマ区切りはどこにいった?!

どうやら、IE11はお行儀が悪くて、d属性値を勝手に書き換える癖があるようです。(バカらしいので他のIEバージョンは確認していません)
カンマを消して、スペースを挿入するようです。それが彼の流儀なんでしょうか。

ニッチなのか、検索しても情報は少ないものの、この事象に遭遇して困惑している人もやはりいました。
https://stackoverflow.com/questions/21769692/ie11-strips-commas-from-my-svg-xml-attributes

このスペースで区切る書き方自体はSVGの仕様に則っているようです。
ただ、上記stack overflowでコメントしている人が言う通り、書かれている文字列を書き換えていいというわけではない

全てのウェブサイト制作発注者に告ぐ。
そろそろIEをサポート対象から外す勇気を持て。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?