んで、今、アニメーション周りの実装をしているのだが、 SVG仕様書の定義があいまいな部分が多くて困っている。
たとえば モーションパス。モーションパスは直線やベジェ曲線で指定したパスに沿って要素を動かすタグで、たとえば以下のようにすると長方形が直線(0,0)-(100,0)に沿って、右に3秒かけて移動する。
ここで、親要素のrectに transform属性によるアフィン変換がかかっている場合はどうなるか?<rect width="10" height="20" > <animateMotion path="M 0 0 L 100 0" dur="3s"/> </rect>
まず、このときの定義が仕様書に書いてない(ような気がする)。 しょうがないので、各種ブラウザの挙動をみると、モーションパス自体も親要素と同じアフィン変換がかかるようだ。てことで、上の場合には直線(0,0)-(0,100)に沿って、真下に矩形が移動するアニメーションになる。<rect transform="rotate(90)" width="10" height="20" > <animateMotion path="M 0 0 L 100 0" dur="3s"/> </rect>
たしかに親要素の影響をモーションパスが受けないと不便そうなので、納得がいく挙動ではある。
では、親要素のアフィン変換自体を動的に変更させるとどうなるか?
たとえば以下は animateTransformというタグによって、親要素のtransform属性を上書きする例である。親要素のrotateの値が子要素のanimateTransformタグによって90から0へと変化していく。
この場合も当然仕様書には書いてない(ような気がする)。<rect transform="rotate(90)" width="10" height="20" > <animateMotion path="M 0 0 L 100 0" dur="3s"/> <animateTransform attributeName="transform" type="rotate" from="90" to="0" dur="3s"/> </rect>
Adobeのビューアの挙動をみると今度は モーションパスは親要素のtransformの影響を全く受けなくなるようだ。 つまり上の例ではモーションパスは一番最初の例と同様に(0,0)-(100,0)の直線として扱われる。
このあたりでちょっと仕様に納得がいかなくなってくるが、さらに、今度は親要素のtransform属性を上書きするのではなく、追記するようにしてみる。
additive属性によって、親要素のrotateの値を上書きするのでなく、加算することになる。つまり親要素のrotateは180から90へ変換するアニメーションとなる。<rect transform="rotate(90)" width="10" height="20" > <animateMotion path="M 0 0 L 100 0" dur="3s"/> <animateTransform additive="sum" attributeName="transform" type="rotate" from="90" to="0" dur="3s"/> </rect>
すると、不思議なことにモーションパスは再度親要素のtransform属性、それもアニメーションによる変形を受ける前の"rotate(90)"の影響だけを受けるようになるようだ。
今回の例以外にも、こういった複数のタグが絡み合ったときの挙動に対する記述が、不思議なことにSVGの仕様書には書いてない(ような気がする)。
現状は仕様書に明記されていない部分は Adobeのビューアを参考に推測しているが、Adobeビューアの挙動が本当に正しいのかもわからないし、そもそもアニメーション周りでもまったく実装されていない機能などが多数存在している。
このままじゃビューアごとに挙動が異なるという混沌とした状況になるんじゃないかと危惧してしまう。
SVG大丈夫なのか!?VRMLみたくなってしまうのは避けてもらいたいのだが...
Comments
サンプルがあった方がわかりやすいのでアップしておきました。
http://circusware.co.jp/test/animateMotionSample.html
こういうちょっとした説明をする場合に、テキストエディタでぱぱっとアニメーションをかけちゃうSVGは本当に便利だね。
IEにあわせるようにブラウザを作っているが
恐ろしくへんてこなHTMLファイルがいっぱい
ころがっているし、IEも好意的に解釈する。
RFCなんてほとんど読んでいないし役に立た
ない。
RFCに準拠するよりデファクトスタンダード
に準拠するしかない。そして開発は永遠に
続く。
SVGってJavaScriptも使えるんだよね？
ははは。ibisBrowserの開発でまさに大変な思いをしてる最中だね。
HTMLはほんとに大変そう。かみやんのいうとおり、ブラウザの実装者はこのまま永遠に苦しみそうな気がする。とりあえずIEの解釈ルールの詳細でも公表してくれればかなり楽になりそうだけど、MSはしてくれないかな?
SVGの場合は幸か不幸かまだほとんど普及してないので、いまのうちに問題のある仕様を直せば間に合う気がするんだよね。とりあえず今回みたいなあいまいな仕様の明確化は最低限必要として、実装を楽にするために仕様をもっと簡略化するべきだと思う。これじゃFlashには勝てない。
>>SVGってJavaScriptも使えるんだよね？
うん、ECMAScriptが使えます。
ECMAScriptの部分がなんとかなれば、速度はともかくほぼフルスペックのSVGビューアもわりと少ない工数で作れそうなんだよね。C/C++で使えるフリーのECMAScript処理系どこかに転がってないかなあ...
やー、いくらなんでもFlashには永遠に勝てない
と思われる。
>>SVGってJavaScriptも使えるんだよね？
>うん、ECMAScriptが使えます。
>ECMAScriptの部分がなんとかなれば、速度はともかくほぼフルスペックのSVGビューアもわりと少ない工数で作れそうなんだよね。C/C++で使えるフリーのECMAScript処理系どこかに転がってないかなあ...
SpiderMonkyどうぞ。
http://www.mozilla.org/js/spidermonkey/
chrome hearts 財布 コピー http://www.thecht.co.uk/xbalmore/demand_chrome.html
ヴェルサーチ コピー 財布 http://www.notarypublic.co.uk/new/function_versace.html
CHANEL コピー 時計 http://www.cornwall-switch.org/ecard/relation_chanel.html
hvrpkjh http://www.g11g9u885ii0v0qi5qzy1t59976cxhi0s.org/
[url=http://www.g11g9u885ii0v0qi5qzy1t59976cxhi0s.org/]uhvrpkjh[/url]
<a href="http://www.g11g9u885ii0v0qi5qzy1t59976cxhi0s.org/">ahvrpkjh</a>
シャネル 財布 汚れ http://www.wibet.pl/pmdyywz/Isuqes-456.html
duvetica ファー ジレ http://www.sp-raduga.ru/hallmark/duvetica-1303oc165vx.html
ドルチェ ガッバーナ 財布 口コミ http://www.esejong.co.kr/bksbetz/Drawer-694.html
mhl コンバース ミドルカット http://vinapharm.net/wqlumle/992-jwihtfcio-1039.html
モンクレール 茶タグとは http://pay.long-xin.com/dlxjgbf/Sevenfold-601.html
FENDI バッグ トート http://fendibags.xyz/20150116-031549-oDmm.html
gucci 時計 保証 http://qgfcw.com/loop/Kzcn-1435.html
ブレスレット クロムハーツ http://ubmengajar.ub.ac.id/EvNn/Chicago-1723.html
コンバース ハイカット インヒール 白 http://www.chinacocs.org/BHLL/mdalf-1188.html
デュベティカ コラボ http://inforeach.gencat.cat/catbopn/Policeofficer-1746.html
ポールスミス デニム kuro http://nitiudyog.com/kk/1595-paulsmith-1128.html
空箱 シャネル http://pacifique.com/yirjtb/mnb-uq_885b409x.html
パタゴニア ダウン 洗いかた http://www.timeandgems.com/og/w=patagonia-patagonia-uo-masurn.html
プラダ プレゼント http://www.japdeva.go.cr/england_552.html
イブサンローラン 大阪 財布取り扱い店舗 http://www.choiseul.es/ntpb/946-quorug-1141.html
コーチ id http://inforeach.gencat.cat/front/coach-mkmfcp.html
ドルチェ ガッバーナ ネックレス amazon http://www.qhbole.com/plhfvdv-886.html
ダナー エクスプローラー http://linkitcompany.com/seniorhighschool/danner-rsxsph.html
ヴァンガード デッキ グレード バランス http://www.japdeva.go.cr/freeze/newbalance-oos1229y.html
デュベティカ leon http://www.spcpharm.co.kr/wield/Repetitive-1374-35-681.html
ジェイコブス 横浜 http://senderjet.com/hjzhfgroys/2015012719531842134.html
ポールスミス スーツ 大阪 http://redsuns.cl/teosodyrq/paulsmith-919iiqqf.html
ディオール ジュエリー デザイナー http://www.japdeva.go.cr/wnk867d/20150128081401yguw.html
少女時代 ティファニー 車 http://hygenepharma.com/tfcauq/ihyoxizlivbnp-1299qp1042teachable.html
ドルチェ&ガッバーナ バッグ レディース zozo http://www.sp-raduga.ru/folm/795-dolcegabbana-1361.html
ザノースフェイス ナイロンパーカー http://lasermann.co.kr/ydux/2145-tce-280.html
cartier ベニュワール アロンジェ http://www.cftiegypt.com/kbhzrpk/Hertz-1349.html
iphone ペースト 履歴 http://inforeach.gencat.cat/jl/890-iphone-1053.html
bottega veneta buyma 評判 http://bodybreath.com.tw/TkIui/961.html
クロエ 手帳 中古 http://www.sdgrandtrading.com/ultimate/oqaksv-reckon-1372/
コンバース サファリ柄 http://www.japdeva.go.cr/gggu/221-converse-1081.html
duvetica 並行輸入 修理 http://www.japdeva.go.cr/xxikvh/irfqtyf-change-86yi.html
アディダス 帽子 メッシュ http://www.tokyogrillmemphis.com/kbmgdit/Inhalation-248.html
楽天 セリーヌ 偽物 http://www.maghrebex.com/HpBjy/721.html
モンスターエナジー 時計 http://disorda.jabarprov.go.id/kxle/1051-ixwoyz-2089.html
バーバリー 北広島 http://puki.vn/ryx/gzj-1242xbq364.html
バートン 種類 板 カタログ http://www.japdeva.go.cr/gr/thousands-proportionately-7.html
プラダ格安 財布 http://www.japdeva.go.cr/replete_1277.html
dunhill vacations inc オタ芸 http://redsuns.cl/secular/yvbjcjfol-p1031s370q.html
オークリー 取扱店 大阪 http://www.weedioh.com/akjctz/rgmd-khtv=ltchrwahi-1149qa.html
バートン ルーラー ブルー http://webboka.mariestad.se/mfkesdti/494-zerohalliburton-971.html
オロビアンコ 財布 正規店 http://www.satospa.com.tw/bvwztwa/Thrust-914.html
コーチ 男性時計 http://inforeach.gencat.cat/homograft/muy1064-ia961jty.html
バランス オブ パワー kw http://lawschool.knu.ac.kr/xz7/1004-newbalance-1261.html
モンスターズインク 動画 にゃんにゃん http://wkim.80port.net/nvluwnuroo/R-mlvq852.html
コンバース 星柄 http://www.chinacocs.org/BHLL/cxldl-1065.html
モンクレール メッシーナ人気 http://www.v144.com/kvjgfd/aooaahobtuzqu-1948iy1659a.html
リュック 白 布 http://www.wsbs.cn/bmcf/544-fendi-740.html
デュベティカ ダウン 中古 http://www.japdeva.go.cr/xxikvh/hxcdxpq-equitable-1382sn.html
サンローラン バッグ こじはる http://www.japdeva.go.cr/uezr/1309-ysl-1147.html
bottega 意味 iphone http://dimsatec.com/EKAD/gmjwe-1125.html
ザノースフェイス ジャケット レディース http://www.inoxia.it/ef/107-northface-883.html
キッズ ゴールドコンバース http://diligente.pt/rghprys/Said-645.html
ティンバーランド ゴアテックス 靴 http://www.chcdl.com/lhrsyth/Unforgettable-1937.html
リーバイス 店舗 東海 http://www.nbest.org/AlUak/7.html
献立 バランス 一人暮らし http://kostravel.gr/jtxxisa/Moreover-1276.html
エルメス 時計 レディース ダイバー http://www.leeweiss.com/mvybyne-643.html
ダンヒル エディション 廃盤 http://www.pcaltd.net/ikhfix/IMPLOSION-mythologist886.html
ゴヤール トートバッグ正規品デパート価格 http://kostravel.gr/is/609a1334t_1397-qzaaiubyb.html
札幌 革ジャン 古着屋 http://tx2010.com/privacy/thespian-1397culev.html
ディオール アディクト グロス 人気色 http://www.yunshiweb.com/Zygubd/dior14.html
白馬 パタゴニアアウトレット http://inforeach.gencat.cat/solong/1117-patagonia-1473.html
バーバリー ハラコ柄 http://previtek.com/gltypjl/929-burberry-26.html
ルイヴィトン 名入れ http://www.komornik.stargard.pl/hateful/Breve-442-531-1712.html
グッチ 迷彩 トートバック http://www.raphne.com/hfbnnm/czemwh620/
エルメス アマゾン 男性 http://jacui.mg.gov.br/jgupredr/87-hermes-743.html
エルメス アザップ ブログ http://www.leeweiss.com/jujelwm-485.html
りんくう オロビアンコ http://www.satospa.com.tw/bvwztwa/Ripe-414.html
シャネル 膝掛け http://www.sp-raduga.ru/yhqj/441-chanel-473.html
オークリー 度付き 静岡 http://minomushi.quu.cc/board/votcb-jhsfhi.html
レイク miumiu http://inforeach.gencat.cat/wsxlkqcuy/miumiu-materials-age-1773.html
outlet ポールスミス http://kostravel.gr/gc/1201-paulsmith-1496.html
セリーヌ ホリゾンタル 限定 http://denledphongviet.com/ppns/1236-ucghcp-1574.html
ゴヤール 長財布 激安 http://redsuns.cl/ejsq/1104-goyard-192.html
iphone フォルダ 自動 http://vivalife.com.my/rtxh/881-iphone-1376.html
シャネル 詰め替えボトル http://www.marianfryga.com/OAWP/pigcf-790.html
クロエ カフェバック http://joycook.com/Iydlplm-20150128080908066-176-1323.html
モンスターズインク リュック 緑 http://www.ogl.com.sg/laurasia/Microorganism-2003-2033-747.html
オークリー プレミアムケース http://www.haozhengshu.com/uuea/435-oakley-556.html
asics ランニングシューズ ライトレーサー http://www.flora.sat1977.com/wjzbwlq/Wxzcvf-635.html
ポールスミス コレクション 靴 http://www.wxbao.net/os/raxqmaf-cxuyah-ominous-0.html
oakley サングラス 度付き 価格 http://www.jmjlegal.sk/Hsbgsas-20150128081630807-301-698.html
cartier paris 時計 http://corsocsv49.joomlalombardia.net/co/744-lqcgnx-355.html
アシックス バッシュ 人気 http://www.artmovers.pl/nzepfgk/Plutonium-942.html
シーバイクロエ 札幌 http://joycook.com/Vxagmdt-20150128080908066-1320-326.html
ゴヤール カバン 安い http://taitungcomm.com/hn/957-goyard-154.html
ミズノ jpx 初心者 http://emodels.ca/ausnip/communism-qifygdzvjijeimo-520.html
ダンヒル 店舗 時計 http://redsuns.cl/tj/1109-jjq-509.html
ケイトスペード 財布 春夏 http://redsuns.cl/jmvgoomg/767-katespade-1646.html
cartier ネックレス 価格 エアコン http://corsocsv49.joomlalombardia.net/co/884-xncjal-973.html
スノボ バートン 初心者 http://etour.knu.ac.kr/GZKH/peesl-1138.html
婚約指輪 シャネル http://www.cszlw.com.cn/cszlw/show-20150123062133-21006.html
エルメス 店舗 心斎橋 http://personal.ssk3.go.th/KmYd/Contempt-1671.html
ルイ ヴィトン靴下 http://www.komornik.stargard.pl/hateful/Planner-243-1091-1045.html
iphone 修理 千葉県 http://vivalife.com.my/rtxh/1289-iphone-888.html
マーク ジェイコブス デイジー ネックレス ブランド http://personal.ssk3.go.th/jrenkqj/601-rhv-879.html
バランス とは xperia http://lawschool.knu.ac.kr/xz7/1203-newbalance-64.html
主な販売2016年最新作ブランド財布コピー新品！
シャネル時計 ダイヤ ed http://www.okakaku.com/brand-56-copy-0.html
主な経営スーパーコピー:バッグ,財布,腕時計,ファッション小物,ブランド商品
商品の数量は多い、品質はよい、価格は低い、現物写真！
経営方針: 品質を重視、納期も厳守、信用第一は当社の方針です。
┏┓┏━┓ ★★★絶対価値ありで〜す
┏┻┻┛□┃┏★★★★┓┏━━━━┓┏━━━━┓┏━━━━┓
┃超人気新作N品登場☆注文を期待歓迎光臨┃
┗◎━━◎┻┻◎━━◎┻┻◎━━◎┻┻◎━━◎┻┻◎━━◎┛
ロレックス レディース 腕時計 ジルスチュアート http://www.fujisanbrand.com/watch/omega/sea/dce0d4efd6cc8a87.html
スーパーコピーブランド人気特集専門店!
ブランドスーパーコピーN級品バッグ・財布・時計・アクセサリー・水着販売専門ショップ！
ブランド アクセサリーコピー人気特集 、
日本直営店最高級激安高品質ブランドアクセサリースーパーコピーN級品販売通販！
カルティエ 結婚指輪 ラニエール 時計 http://kopi356.com/category-66-b0.html
ウブロコピー、ウブロスーパーコピー、ウブロコピー時計、
ウブロコピー代引き、ウブロコピー 時計通販、スーパーコピー、
各種海外有名ブランド時計品を豊富に取り揃え、
しかもお客様を第一と考えて、驚きの低価格で提供しております
カルティエ 結婚指輪 ランキング 2014 http://giginza.com/alone/detail-17.html
┏┓┏━┓ 顧客は至上 宜しくお願いします
┏┻┻┛□┃┏━━━━┓┏━━━━┓┏━━━━┓
┃当店は腕時計の特価の活動を出します！品質保証
┗◎━━◎┻┻◎━━◎┻┻◎━━◎┻┻◎━━◎┛
スーパーコピーブランド
*通販しますご注文を期待しています
*全物品運賃無料(日本全国)
激安ブランドコピー
*不良品物情況、無償で交換します.
*税関没収する商品は再度無料で発送します
スーパーコピー高品質
*2017年人気貴族店 真咲 当店の特大優惠活動:
*注文40000円以上 贈呈 N品腕時計
カルティエ 結婚指輪 文字数 mm http://watchkopi.com/protype/list-203.html
ブランドスーパーコピー通販専門店!人気N品激安！
2017年新品種類がそろっています。
品質がよい、価格が低い、実物写真！
弊店のスーパーコピー時計は品質2年無料保証になります。
日本全国送料で数量無料です。
オメガ スピードマスター オーバーホール 大阪 http://kopi78.com/products_bigbrandId_4.html
世界ブランドコピー業内最高レベルのルイヴィトン コピー品（Ｎ級品）をお客様に提供します。
ルイヴィトン財布コピー、ルイヴィトン財布、財布ヴィトン、スーパーコピーなど豊富な物件を揃いています。
当店はすべての商品はサイトに掲載していません。
お探しの商品が見つからない場合、お気軽にお問い合わせください。
カルティエ 結婚指輪 紛失 pasmo http://copysale.net/Copy-sale-7651-_25E3_2583_25AB_25E3_2582_25A4_25E3_2583_25B4_25E3_2582_25A3_25E3_2583_2588_25E3_2583036EB2AC44.htm
最新作ブランドコピールイヴィトン財布激安
偽物ブランド財布,偽物ブランド財布
シャネル財布偽物,ルイヴィトン財布,財布コピー
人気ブランド_バッグコピー_財布コピー
サングラス偽物_ベルトコピー_新作_スーパーコピー
バッグ、財布、小物などでございます専売店
★弊社は「信用第一」をモットーにお客様にご満足頂けるよう
★全物品運賃無料(日本全国)
★不良品物情況、無償で交換します.
★税関没収する商品は再度無料で発送します!
ホームページ上でのご注文は24時間受け付けております
オメガ 電波時計 http://kopii.net/products/p1/8/index.htm
普通、商品が届かない場合、原因が２つあります。
1.商品が在庫切れるのです。
２．商品が通関に止めれたのです
どうやって問題を解決しますか？
１．よく知っている店から買います。もしよく知っている店がなければ、とりあえず安い商品を買ってみます。相手の信用がわかります。もしその店の信用があれば、もっと高い商品が買えます。
２．前もっとお客様と商品が止められたことを説明した場合、再度商品を送るかどうか交渉してください。そうしたら、通関に止められることで起こったトラブルが避けられます。
３．万が一商品を再度出荷しないなら、まず店と交渉してみてください。
３もし騙されるなら、銀行カードが使えなくなるのは一番よく使っている方法です。
そうすると、店に大変損失を招きます。
弊店はコピー商品を取り扱うのは何年の経験がありまして、ずっと信用第一、お客様に満足させることを主旨とします。
ぜひご来店くださいませ。ホームページ：
ロレックス 40代 男性 o型 http://www.bestcopy.cc/brandcopy-l-5-p-1.html
当店は海外安心と信頼のスーパーコピーブライトリング、代引き店です.
正規品と同等品質のシャネル コピー代引き,品質が秀逸,値段が激安！
ブライトリングコピー,代引きなどの商品や情報が満載！
全商品写真は100%実物撮影です!