上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 と言うわけで、興奮の冷めないうちに色々やってみようと思います。
 このサイトがよさそう。

ASCII.jp:HTML5で注目!インラインSVGの使い方|古籏一浩のJavaScriptラボ

 最新ブラウザでないと、しかも一部の最新ブラウザでないと見れないそうです。
 Firefox4(ベータ版)がお勧めだそうですよ。他は「クロームの最新版(7)」「IEの最新版(9・ベータ版)」が対応しているそうです。





とりあえず、言われるがままやってみる

…今最新版のクロームで見ているんですが、出来ています。やった、すごいぞ!
 なんだか、異常に描画の幅を取っているようなので…

<div style="height:100px;overflow:auto;">
<svg>
<rect x="0.5" y="0.5" fill="#ffff00" stroke="#ff0000" width="100" height="80"/>
</svg>
</div>

 こんな感じで、「DIVボックス」に高さを指定して、大きくなりすぎないようにしてみました。
 すごい、HTMLと同じ感覚で使えます。コレこそ…



Scalable Vector Graphics (SVG) 1.1 Specification


 なんか、色々出来るっぽいです。やってみよう…


ABC


 ヤバイです、本当に何でも出来る…


<div style="height:200px;overflow:auto;">
<svg>
<g transform="rotate(30)">
<text x="160" y="50" font-size="20" font-family="arial" fill="blue" >
ABC
</text>
<rect x="50" y="0.5" fill="#ffff00" stroke="#ff0000" width="100" height="80"/>
</g>
</svg>
</div>


 なるほど「<svg>~</svg>」で囲んで、「<rect>」が、四角、「<text>~</text>」で、テキスト、「<g>~</g>」で囲むと、アクションが起こせるわけだ。
 すごい、HTMLの延長だ。最強だ…!
 しかも、普通にテキスト選択が出来るし…!
このエントリーをはてなブックマークに追加
Tue.02.08.2011
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。