SVGのパスをアニメーションにする為のシンプルなスクリプト・「jQuery DrawSVG」jQuery DrawSVGはSVGのpathにアニメーションエフェクトを付与する為のスクリプトです。jQueryに依存しています。書いたpathにstroke-dasharrayプロパティとstroke-dashoffsetプロパティを差し込んで手軽にアニメーションにしよう、というもの。別途easingプラグインを使うことでeasingにも対応可能です。圧縮版で1kbを切るほどの軽さなので手軽に使えそうですね。ライセンスはMIT。 jQuery DrawSVG
【SVG】raphael.jsを使ったらすんごい色々捗った | ユガラボ
こんにちは、ユーリです！ 少し前、SVGでアニメーションを行う記事を書きましたが、 その後の開発でブラウザ間の挙動の違いや、古いブラウザでうまく動かなかったりと色々と苦労いたしました。 うおー、やはり一定数の古い環境は切り捨てるしかないのかッ…！対応コードを書けば書くほど煩雑になってゆく！ そこに現れた救世主！！ SVG制御用ライブラリ… Raphael.js っ！！ ↓さんぷる 自前のコードだけでの対応に限界を感じ、ライブラリを使用してめんどくさいところは全部吸収してもらうことにしました。 まさにうってつけのライブラリが見つかりました！ それがraphael.jsでございます。 raphael.jsのココがスゴイ！ ■IEやsafqriの古いバージョンでも動作 特に何も意識せずとも、raphael.jsからの処理を使ってSVGを操作すれば、古いブラウザでもしっかり表示され、animate
【備忘録】SVGのpathをJavaScriptでぬるぬる動かしたかった | ユガラボ
こちらは、最近流行りのSVG！gif画像ではありません。 クリックして色を変えるなどの処理がリアルタイムで行えます。 IEやsafariなど一部のブラウザではうまく動作しないかもしれません。ゴメンナサイ。 これをjavascriptで制御しようとしたところ、いろいろ大変だった話。 ※この記事は、SVGが動作する環境の方へ向けて書いています。動かない方はゴメンナサイ。 SVGは、ドットの集まりではなく、パス(点と線)の集まりである為、解像度は無限大です！ また、パスの値は数値で書かれていて、ページが表示されてからでも、パスの値を調節すれば、見た目をぐにぐに変えちゃったりもできます！ ただし、現時点ではブラウザによって対応していない環境があったり、大きさの指定がややこしかったりと、いろいろ課題もございます。 今回は、どうしてもSVGをぬるぬる動かしたい！という案件がございまして、工数はかかりま
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
