minetty99のブックマーク / 2016年10月19日

minetty99 id:minetty99

2016年10月19日のブックマーク (3件)

「10分でわかるSVG 応用編」サンプル
<g fill="#c44" stroke="#822" stroke-width="2"> <circle cx="32" cy="32" r="30" /> <rect x="40" y="30" width="80" height="50" /> </g> <g id="s02"> <circle cx="32" cy="32" r="30" fill="#c44" /> <rect x="40" y="30" width="80" height="50" rx="10" ry="10" fill="#44c" /> </g> <use x="140" y="0" xlink:href="#s02" stroke="#ccc" stroke-width="2" /> <symbol id="s03" viewBox="0 0 120 80"> <circle cx="32" cy="
minetty99 2016/10/19
“ var ctbl = { '#c44':'#4c4', '#4c4':'#44c', '#44c':'#c44' }; var el = document.getElementById('s51'); el.addEventListener('click', function(ev) { this.setAttribute('fill', ctbl[this.getAttribute('fill')]); }, false); ”
リンク
SVGアニメーションでマスクした写真をぷるぷる動かす方法｜ Tips Note by TAM
ちょっと凝った動きをつけたいけど、Canvasでガリガリ書くのはちょっと・・という方に是非お勧めしたいのがSVGアニメーション！ SVGはXMLをベースとした2次元ベクターイメージなので拡大縮小が自由というのも魅力の一つ。このTipsNoteのロゴで弊社のキャラクターTAMくんが動いているのもSVGアニメーションによるものです。今回はそんなSVGで、マスクした画像のフチをぷるぷる動かすサンプルを作ってみたいと思います。完成デモ＞＞素材を作成まずはIllustratorでぐねぐねした枠(A)を書きます。続いて(A)を複製し、パスの数は変えずに枠の凹み具合などを変えた(B)を作成します。これだけでも枠を動かすことは可能ですが、2つだけだと動きが単調になってしまうので今回は4パターンの異なる枠(A〜D)を用意しました。用意ができればそれらをSVG形式に保存して準備完了です！
minetty99 2016/10/19
リンク
【備忘録】SVGのpathをJavaScriptでぬるぬる動かしたかった | ユガラボ
こちらは、最近流行りのSVG！gif画像ではありません。クリックして色を変えるなどの処理がリアルタイムで行えます。 IEやsafariなど一部のブラウザではうまく動作しないかもしれません。ゴメンナサイ。これをjavascriptで制御しようとしたところ、いろいろ大変だった話。 ※この記事は、SVGが動作する環境の方へ向けて書いています。動かない方はゴメンナサイ。 SVGは、ドットの集まりではなく、パス(点と線)の集まりである為、解像度は無限大です！また、パスの値は数値で書かれていて、ページが表示されてからでも、パスの値を調節すれば、見た目をぐにぐに変えちゃったりもできます！ただし、現時点ではブラウザによって対応していない環境があったり、大きさの指定がややこしかったりと、いろいろ課題もございます。今回は、どうしてもSVGをぬるぬる動かしたい！という案件がございまして、工数はかかりま
minetty99 2016/10/19
リンク
- 2016年10月20日
- 2016年10月19日
- 2016年10月17日