defghi1977

svgはいんすぴれーしょん
http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo.htm
重箱の隅っこをつっついて,にんまり.
ドキュメントにまとめて,にっこり.

Works

svgで徐々にパスを描画

stroke-dasharray値を大きくとってstroke-dashoffsetをずらすのがミソ.

  • 3293
  • 5

svgのアニメーションを分かりやすくプログラムする

http://jsdo.it/ub-pnr/aswk を再構築.オリジナルより動きがぎこちないのは大目に見て… なんとなくコツがつかめてきたぞ. ・図形を構造化する. ・図形にidを振る. ・アニメーションのタイミング毎にanimate要素を並べる. これでかなりすっきりする ※chromeで正しく動作しないのね. いろいろ試してみたけれど,どうやらchromeだけアニメーションの動作がアレ

  • 2906
  • 1

svgとcssだけでカレンダー

スクリプトはurlにハッシュ値を追加するためのもので、 コード自体はスクリプトなしで動作するように実装してみた. svgでは要素の並べ方が自由なので,cssのセレクタと組み合わせることでかなりの無茶が可能. だが,ブラウザごとの動作の違いに涙が出てくる. firefoxだと上手く動作する. chromeだと月送りボタンが正しく動作しない・・・ →自分自身のsvg文書片へのリンクが正しく動作しないようだ. operaだとレイアウトがちょっとおかしい・・・ 追記) 一応chromeでもスクリプトを追加すれば動くけれど…

  • 2974
  • 1

svgでドット絵っぽくpart2

前回 http://jsdo.it/defghi1977/64YG を改良. アプローチを変えてずっとシンプルにしてみた.

  • 1542
  • 3

svgのd操作を使ってcanvasにパスを描こう

canvasのパス描画をsvgのd操作を指定することで一括指定してしまおうというもの. 似たような処理を行うcanvgの焼き直しとも言えるけれど, こちらはpath文字列を指定するだけなのでシンプルと言えばシンプル. でも,実際に作ろうとするとインターフェースの違いから結構面倒なんです. (円弧の処理が死ぬほどめどい)

  • 2277
  • 2

スクロールすると背景の時計が動く

http://www.vgtest.co.nf/ の歯車の動きが面白かったので,自作してみた. ぱっと見背景画像のように見えるけれど,その実ウインドウいっぱいに広げたsvgだったりする. アニメーションさせた画像をpattern要素で敷き詰めているのがミソ.

  • 2621
  • 7

Skills

  • jQuery
  • HTML5
  • XHTML
  • CSS
  • JavaScript
  • Visual Basic
  • C#
  • Java
  • SQL

Hot tags

Categories

HTML / CSS / JavaScript