この記事は 2019年1月8日 に投稿されました。
内容が古いかもしれません。ご注意ください。
※最後に更新されたのは 2019年2月5日 です。
内容が古いかもしれません。ご注意ください。
※最後に更新されたのは 2019年2月5日 です。
Microsoft Edgeが嫌いです、バカなので。
EdgeやIEでSVGがうまく表示されないっていうのは定番だと思うんですが本当にちょこちょこハマるので備忘録、、IEはそろそろ引退なのでまだ許すしEdgeよりはまだ理解のある処理をしてくれるのでいいです。
後継ブラウザであるEdgeがなんで一番バカなのかな。
多分viewBoxの数値が大きいとEdgeでだけ正常に表示されない
SVGの中にはSVGタグ自体が持つwidth・height属性の設定、viewBoxの数値設定、style属性の設定のいずれかなのかviewBoxなのかはっきりと調べてないのですが、「表示されている」ファイルとだめだったファイルを見比べるに、おそらくviewBoxの値が大きいとEdgeでは例えCSSで数値指定しても任意の大きさで表示されない。
どうすんのか
とりあえず素材のSVGファイルをXD上に実寸で配置してからXDからSVG書き出しすればソースの無駄を省きつつ実寸のviewBox設定で書き出してくれます。とりあえずね、、
Microsoft、ブラウザ作るのやめてくれないかな……