インラインSVGの見た目がボケてしまう事に対する処方箋

インラインSVGを使っていて困ること，それは「いつ何時ボケボケになるかわからん」ということです．そこでどうやったらこの「ボケ」を取り除けるかをまとめました．

ブログにまとめようとも思ったけれど面倒なのでリンクを貼っておきます．

要はSVGの枠をスクリーンのピクセルに合わせるにはCSS transformが最も手っ取り早いんだけれど，ブラウザ毎の動作の違いもあって，実現に少し細工が必要ってこと．ScreenCTMとtransformとベンダプレフィクスを組み合わせて, 下のようなスクリプトを発行するんだ.

svg = document.querySelector("[selector]");
m = svg.getScreenCTM();
svg.style.transform = "translate(0,0)";
svg.style.msTransform = "translate(" + (Math.floor(m.e)-m.e) + "px," + (Math.floor(m.f)-m.f) + "px)";