dnjiro’s 9VAe blog

誰でもアニメが作れる無料ソフト9VAeきゅうべえ開発者のブログ

9VAeきゅうべえで作成したSVG(SMIL)が Mac の Safariでおかしくなってる

9VAeきゅうべえで作成したアニメは、SVG形式で保存できる。

SVG-SMIL という標準フォーマットで、Edge、IE以外のブラウザなら

たいてい再生できるのだが、

 

Safari でクリックでもう一度再生しなくなってる

9VAeで出力したSVGアニメをブラウザで再生すると、1回再生して、最後の画面で

停止するのだが、その画面をクリックすると、もう一度最初から再生するように

なっている。その仕組みは以下のとおり。

 

以下は、画面上の四角を右に移動するアニメを出力した、SVGの内容

<svg xmlns:xlink="http://www.w3.org/1999/xlink" image-rendering="optimizeSpeed" baseProfile="basic" version="1.1" xmlns="http://www.w3.org/2000/svg"
id="000.svg" viewBox="0 0 512 288" >
<defs>
<mask id="SVG_Canvas"><rect fill="#FFFFFF" x="0" y="0" width="512" height="288"></rect></mask>
</defs>
<g mask="url(#SVG_Canvas)">
<g id="SVG_Start">
<rect fill="white" x="0" y="0" width="512" height="288">
<animate id="Sa" begin="0s;SVG_End.click" dur="29999s" attributeName="visibility" from="visible" to="visible" /></rect>
</g>
<g id="P1a0">
<path fill="#80ffff" stroke="#000000" stroke-width="1.00">
<animate fill="freeze" begin="Sa.begin+0.00s" dur="1.00s" attributeName="d"
from="M12.00,16.00L127.00,16.00 127.00,149.00 12.00,149.00 12.00,16.00 Z"
to="M380.06,16.00L495.06,16.00 495.06,149.00 380.06,149.00 380.06,16.00 Z" />
<animate fill="freeze" begin="Sa.begin+1.00s" dur="1.00s" attributeName="d"
from="M380.06,16.00L495.06,16.00 495.06,149.00 380.06,149.00 380.06,16.00 Z"
to="M380.06,16.00L495.06,16.00 495.06,149.00 380.06,149.00 380.06,16.00 Z" />
<set fill="freeze" begin="Sa.begin+2.00s" attributeName="d" to="M-99-99" />
</path>
</g>
</g>
<g id="SVG_End" mask="url(#SVG_Canvas)">
<rect fill="white" x="0" y="0" width="512" height="288"></rect>
<path fill="#80ffff" stroke="#000000" stroke-width="1.00" d="M380.06,16.00L495.06,16.00 495.06,149.00 380.06,149.00 380.06,16.00 Z"></path>
<!--9vaGoOut--><set fill="freeze" begin="0s;click" attributeName="display" to="none" />
<!--9vaGoIn--><set id="Se" begin="2.00s;click+2.00s" attributeName="display" to="inline" />
</g>
</svg>
 

最後にある <g id="SVG_End"> が、最後の画面で、これがクリック( begin="0s;click")されると、attributeName="display" to="none" となる。"display" が "none"になるのは、消えるという意味。つまり、クリックすると最後の画面が消える。

 

一方、最初のほうにある <g id="SVG_Start">には、 begin="0s;SVG_End.click"  と書かれていて、<g id="SVG_End"> がクリックされると、もう一度スタートとする。となる。

 

この仕組みは、Safari でも動いているようなのだが、問題なのは、

<set fill="freeze" begin="Sa.begin+2.00s" attributeName="d" to="M-99-99" />

みたいだ。これは、座標値(attributeName="d" )を、Move to -99,-99("M-99-99") にするということで、画面外の1点に移動せよと命令している。

 

これは、9VAeきゅうべえ独自の書き方で、線を画面外に移動させることで、表示したまま消すという目的で入れている。

 

なぜこうしているかというと、普通図形を消すときには、"visivility" を "hide" にするのだが、アニメーションさせる過程で、"hide" と "visible" を高速に切替えないといけない。ところが、消えていたものを表示させようとするときにタイムラグが生じて、図形がちらつく現象がみられたという経験があるためだ。

 

初期の Safari だと、ちゃんと動作していたのだが、最近の Safari だと、これが動かなくなっているようだ。つまり、いったん図形の座標点数をなしにすると、次に、aniimate で点の数を増やすことができないみたい。

 

aniimate で、点の数や図形の形を変更できないのはわかっていた

これは、もともとわかっていて、9VAeでは、丸が四角形に変化する場合でも、animateの前と後で、同じ点の数、同じ図形の形になるようにめんどくさい処理を行っている。ところが、別の animate や set では、異なる形を設定できるはずなんだけど、どうも、それが動いてないようだ。

 

これをどうするか? iPad版 9VAeきゅうべえでは、SVGを標準保存フォーマットにしたいので、なるべく、Safari でちゃんと動くようにしたいのだけど。

 

SVG SMILの表示は、ブラウザの種類やバージョンで動作が異なるので、仕様をかえると、いろいろ問題がおこるかもしれん。

 

再読み込みすると1回はちゃんと動く

ので、今のままでも使えないことはないが