2013年6月17日月曜日

iOSのMobile SafariでSVGのアニメーションをすると背景が消去されない場合がある

iOSでSVGのアニメーションをすると背景が消去されない場合があることがわかった。

例えばこんなSVG。

<svg version="1.1" id="main" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  width="256px" height="256px" viewBox="0 0 256 256" enable-background="new 0 0 256 256" xml:space="preserve">
  <path fill="none" stroke="#CCCCCC" stroke-width="20" stroke-miterlimit="10" d="M218.986,239.081c0,2.118,0.285,6.502-1.771,6.502
 H43.901c-2.058,0-5.682-4.384-5.682-6.502V65.998c0-2.119,3.624-1.177,5.682-1.177h173.313c2.058,0,1.771-0.942,1.771,1.177v173.083
 H218.986z"/>
  <g>
    <polygon fill="#CCCCCC" points="150.248,84.246 150.248,1 107.437,1 107.437,84.246 86.026,84.246 128.842,143.589 171.654,84.246"/>
    <animateTransform  type="translate" attributeName="transform" attributeType="XML" dur="2s" repeatCount="indefinite" values="0,0; 0,45; 0,0">
    </animateTransform>
  </g>
</svg>

モダンなブラウザならこのSVGは動いているはず。ただし、Mobile Safariでは問題の症状が出ているはず。



BloggerではSVGをインラインで表示できないようなので、SVGをimgタグで外部ファイルとして読み込むしかなかったが、これだけでもデスクトップとMobile Safariで見比べてみると問題の症状が分かるだろう。

Mobile Safariではこのようになる。


原因は不明。ワークアラウンドもなし。ただし、Mobile SafariでもインラインSVGの場合は問題ない。

デスクトップのChromeでもimgタグで読み込んだ場合はアニメーションが再生されない場合が見受けられた。

というわけで、SVGをアニメーションさせる場合、今のところインラインにしておいた方が無難だろう。

あまり関係ないけど、iPhone5とNexus7でSVGのアニメーションのスピードを較べてみるとNexus7のがダンゼン上だった。

また、Retinaじゃない機種では速かった。やっぱり4倍のピクセルを書き換えなければならないからだろうな・・・

追記13.06.18:IE10ではアニメーションしないことが判明!モバイルブラウザでだって動いているというのに何やってんだIEは・・・トップレベルシェアのブラウザとしての責任があるだろう?ぷん。