たとえば、以下のような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をサポート対象から外す勇気を持て。