cocu_628496のブックマーク - はてなブックマーク

カスタム図形定義スクリプト「customShapes.js」

カスタム図形定義スクリプト「customShapes.js」〜面倒な図形も簡単に記述できるかも〜 written by DEFGHI1977@xboxlive 更新履歴 2014/08/06 ver0.03 新規作成，公開開始．はじめに本ページでは拙作「customShapes.js」についての紹介と動作サンプル(兼テストケース)について解説します． customShapes.jsって何? customShapes.jsは一言で言うと「SVGにおける再利用可能な図形要素を定義する仕組み」を提供します． SVGが標準的に提供している図形要素はline, polyline, polygon, rect, circle, ellipse, pathの7要素しかなく，お世辞にも使い勝手が良いとは言えません．一般的なjavascriptライブラリではこれら以外の図形を描画する専用メソッドが用

cocu_628496 2014/08/07

svg

リンク

Snap.svgの使い方まとめ

Snap.svgの使い方まとめ How to useすなっぷ.svg タイトル svg要素の基本的な使い方まとめ・別館 written by DEFGHI1977@xboxlive 本記事ではsvg世代のjavascriptライブラリとして有望なSnap.svgの使い方について実際に動作しているサンプルを交えて解説しています（これは動作サンプルであると同時にテストコードと言えるものですね）．なお間違いがあったり，バージョンアップに伴う不整合が発生するかも知れませんので，その点ご容赦下さいね．やっぱり手でゴリゴリ書いてます．なお，Snap.svgを用いたSVG(もしくはjavascriptの)入門記事ではありません．Snap.svgを上手く活用したいのであれば，背後で動いているsvgについてよく知っている必要があります．そのため，ある程度SVGやプログラミングの知識があることを前提に話を

cocu_628496 2014/06/17

すごいわかります "やっぱりSVGは手書きしてなんぼ!"

リンク

svg要素の基本的な使い方まとめ

この文書ではsvgをhtml埋め込みデータとして扱う際の覚書として作成した．svgの要素と属性は実際の例を踏まえて説明したつもり．注意事項仕様はここを参照のこと．本文書では実際の挙動を調べつつ自分なりの解釈が入っているため，多々間違いが入ってしまうかもしれないが，気にしない．スクリプトを使ってsvg要素の中身(ソース)を出力しているため，一部実際のコードと表示されるコードとの間に差異があるが，予めご了承いただきたい．目標は見栄えのする図形をsvgの手入力でサラっと記述できるようになることなので，複雑な図形は素直にinkscape等専用のツールを使うと良い．ただ，ここで示したことはツールを使う上でも役に立つと思う．特にアニメーションなど． svg:ベクター画像のカンバスの定義，title:タイトル，desc:説明 html文書においてsvg画像を挿入したい場合,embed要素を用い