【XML】SVGってどうなの2【DOM】

[0001 Name_Not_Found 2006/08/11(金) 12:30:46 ID:0ktWc2zc]

前スレ落ちたので、あまり要らないと思うけど立てました。

Web2.0とかAjaxの陰に隠れて全然ブレイクしないSVGですが、
OPERAやFirefoxなどネイティブ実装は着々と進行しています。
むしろAjax+SVG（+XForms)は最強無敵艦隊といえるほどのポテンシャルを
秘めており、これが実現すれば（いやネイティブ実装ブラウザでは
すでに一部実現していると思われ）Flashイラネになるでしょう。

もう一つニュース
ｷﾀ━━━━(ﾟ∀ﾟ)━━━━ｯ!!
SVGの新バージョン「SVG Tiny 1.2」、W3Cの勧告候補（CR）に
ttp://www.itmedia.co.jp/news/articles/0608/11/news023.html

早い事フルバージョンの1.2もたのみます！

[0149 Name_Not_Found 2015/09/22(火) 11:27:33.13 ID:A/iMrMyl]

<svg width=800 height=800 viewBox="0 0 903 903"><desc>sin(t) & cos(t)</desc>
<path d="M400,250 C391,51 109,51 100,250 109,449 391,449 400,250" fill=none stroke=blue stroke-width=2 id=path1 />
<path d="M500,250 900,250" fill=none stroke=none stroke-width=2 id=path2 /><path d="M250,500 250,900" fill=none stroke=none stroke-width=2 id=path3 />
<path d="M500,250 501,250" fill=none stroke=none stroke-width=2 id=path4 /><path d="M250,500 250,501" fill=none stroke=none stroke-width=2 id=path5 />
<path d="M500,250 C540,51 560,51 600,250 640,449 660,449 700,250 C740,51 760,51 800,250 840,449 860,449 900,250" fill=none stroke=blue stroke-width=2 />
<path d="M400,500 Q400,520 250,550 C49,590 49,610 250,650 451,690 451,710 250,750 C49,790 49,810 250,850 Q400,880 400,900" fill=none stroke=blue stroke-width=2 />
<path d="M -2,0 L 3,0 z" fill=red stroke=red stroke-width=5><animateMotion dur=10s repeatCount=indefinite rotate=auto><mpath xlink:href=#path1 /></animateMotion></path>
<path d="M0,0 L0,2000 z" fill=red stroke=red stroke-width=2><animateMotion dur=10s repeatCount=indefinite rotate=none><mpath xlink:href=#path1 /></animateMotion></path>
<path d="M0,0 L2000,0 z" fill=red stroke=red stroke-width=2><animateMotion dur=10s repeatCount=indefinite rotate=none><mpath xlink:href=#path1 /></animateMotion></path>

[0150 Name_Not_Found 2015/09/22(火) 11:28:06.98 ID:???]

<path d="M0,-150 L0,150 z" fill=red stroke=red stroke-width=2><animateMotion dur=20s repeatCount=indefinite rotate=none><mpath xlink:href=#path2 /></animateMotion></path>
<path d="M-150,0 L150,0 z" fill=red stroke=red stroke-width=2><animateMotion dur=20s repeatCount=indefinite rotate=none><mpath xlink:href=#path3 /></animateMotion></path>
<text x=-10 y=20 font-family=Verdana font-size=16 fill=blue>t →<animateMotion dur=10s repeatCount=indefinite rotate=auto><mpath xlink:href=#path1 /></animateMotion></text>
<text x=-10 y=170 font-family=Verdana font-size=16 fill=blue>t →<animateMotion dur=20s repeatCount=indefinite rotate=auto><mpath xlink:href=#path2 /></animateMotion></text>
<text x=-10 y=-162 font-family=Verdana font-size=16 fill=blue>t →<animateMotion dur=20s repeatCount=indefinite rotate=auto><mpath xlink:href=#path3 /></animateMotion></text>
<text x=-51 y=4 font-family=Verdana font-size=16 fill=blue>sin(t)<animateMotion dur=20000s repeatCount=indefinite rotate=auto><mpath xlink:href=#path4 /></animateMotion></text>
<text x=-55 y=-146 font-family=Verdana font-size=16 fill=blue>cos(t)<animateMotion dur=20000s repeatCount=indefinite rotate=auto><mpath xlink:href=#path5 /></animateMotion></text>
</svg>