グリグリ動くUIをVueとSVGでサクッと書く - No Regrets in Bathing
これは Vue.js #3 Advent Calendar 2017 – Qiita 4日目の記事です。 こんにちは。SVGで色々なコンポーネントを作っているものです。最近の作品は下記のような感じです。 Webでグリグリ動くUIを作りたい！！という一心でやっています。 これらはほとんどSVGとVueの組み合わせのみで作っています。依存が少ないというのは大事で、ライブラリ間の相性でハマったり、いろんなドキュメント間を往復することがなくなります。 Webでグリグリ動くUIを作るのは基本的にめんどくさいです。jQuery pluginを駆使して作るのも闇が多いですし、divやcanvasをゴリゴリするのも結構手間がかかります。 ですが、最近はSVGで高度なUI実装されることが増えてきた気がします。特に自分が衝撃を受けたのは、CacooがFlashからSVGにスイッチしたことです。 nulab-i
Snap.svg - The JavaScript SVG library for the modern web.
Why SVG (and Snap)? SVG is an excellent way to create interactive, resolution-independent vector graphics that will look great on any size screen. And the Snap.svg JavaScript library makes working with your SVG assets as easy as jQuery makes working with the DOM. Modern features for modern browsers Snap.svg is designed for modern browsers and therefore supports the newest SVG features like masking
IE6から使えるSVG/VMLを使った高機能JavaScriptグラフライブラリ·Highcharts MOONGIFT
HighchartsはSVG/VMLを使って描画するJavaScript製のグラフライブラリです。 Webサービスにおいてグラフを使うとデータのインパクトが違います。だからこそ使い勝手の良いグラフライブラリを積極的に使っていくべきです。HighchartsはSVGを基本として多様なWebブラウザに対応したグラフライブラリになります。 折れ線グラフです。 Ajaxによるデータロード対応です。 グラデーションをかけることもできます。 滑らかな曲線です。 アイコンを貼付ける例です。 プロットのみで。半透明なドットを使っています。 エリアグラフです。 マイナスの値にも対応しています。 積み上げグラフです。 棒グラフです。 左右比較型の棒グラフです。 複数のデータを並べられます。 棒グラフもマイナス値を出せます。 こんな感じの棒グラフも。 さらにドリルダウン対応です。 HTMLのテーブルからデータを
はいだしょうこ画伯の5年間の成長を、SVGでモーフィングにしてみた - jsdo.it - Share JavaScript, HTML5 and CSS
Inkscapeで描いたpath要素をRaphaëlを使ってアニメーションさせています。 まるで成長していない・・・・・・・・・・ はいだしょうこ画伯の5年間の成長を、SVGでモーフィングにしてみた jQuery UI v1.8.1 Raphael 1.4.3 - JavaScript Vector Library jQuery v1.6 (function($) { /** * MorphingImage class */ MorphingImage = function(name, data) { this.name = name this.data = data || [] } MorphingImage.prototype = { addData: function(pathName, pathData) { if(typeof pathData !== "object" || $
もしもフロントエンジニアがSVG女子をイジったら。音声認識やfpsコントローラなど本気だしすぎな件
SVG女子が公開されて2週間がたちました たいへん多くの方に視聴していただいているようで、感激しています！ 「SVG」がすっかりバズワードになっていますね。 まだの方はぜひご覧ください！ SVG女子を見る SVG女子にはユーザーが自由にイジってオリジナル作品を作れるモードがあります。 いわゆる「神モード」というやつです。 この「神モード」に公開直後から多くの作品が集まっています。（嬉しい！） SVGはJavaScriptから操作できることが特徴です。 色を変えることはもちろん、オブジェクトを変形させたり 再生速度を変えることもJavaScriptからできてしまうんですね。 このSVG女子がすごい！今見ておくべきフロントエンジニアの本気！ セピアカラー カラフルなSVG女子の世界がセピア色になってます。 再生する（SVG女子のページに飛びます） コードを見る SVG女子の消失 アイちゃんが消
[JS]Canvas, SVGを使用した軽量のJavaScriptの3Dエンジン -three.js
通常、複雑な記述をより簡単にできるようにした、3Dを描画する軽量のスクリプトを紹介します。 サイトでは下記のように数多くのデモが楽しめます。 three.js -Javascript 3D Engine [ad#ad-2] three.jsは<canvas>, <svg>とWebGLを使って、2Dと3Dをレンダリングすることができます。 各デモは対応ブラウザ（Firefox4+, Chrome9+, Safari10.6+など）でご覧ください。
第2回 SVG実習 | gihyo.jp
前回はSVGの概要を解説したので、今回はSVGの具体的な書き方をざっくりと見ていきます。 と、その前に前回のおさらいとして、SVGをウェブページで用いる方法を2つにまとめます。 SVGをXMLとして記述し、svgファイル（もしくはdataスキームなど）をobjectタグなどで埋め込むか、もしくはXHTMLを用いてHTMLに埋め込む（Firefox 4.0betaやIE9ppなどはHTML（XHTMLでない）に直接記述することも可能） JavaScriptから動的にSVGを作る SVGをXMLとしてあらかじめ記述しておく方法は画像フォーマットとしても利用できますし、InkScapeのようなグラフィカルなインターフェースで作成したものを表示するのに向いています。一方、JavaScriptでSVGを描画する方法は動的に図を描けるので、データを元にグラフを描くといったケースに適していますし、Rap
日記 | ヨモツネット
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
JavaScriptで3D - os0x.blog
id:wanparkさんが(3年前に)書かれたchannel3というFlash用3DグラフィックライブラリをJavaScriptにポーティングしてみました。IEは未対応です(たぶんそのうち)。 channel3JS - ss-o.net この前のCanvasでDot3Dが結構余裕だったので、もうちょっと本格的な(だけどライブラリとして大きすぎないような)のをポートしたくなったところにchannel3のことを思い出して、突貫でやってみました(コメントアウトいっぱいでソースは綺麗じゃないです)。 SVGとCanvas両対応です。なぜかというとパフォーマンスを比べたかった(SVGのほうが良い)のと、テクスチャやるにはCanvasが必要になりそうだから。 実はSVGほぼ初めて触ったんですが、面白いので後でまとめようと思います。 ソースは os0x / channel3JS / source — B
JavaScriptでSVGのレーダーチャートを描画するライブラリ Raphael Radar をつくった - I CAN ’CAUSE I THINK I CAN!
概要 JavaScriptでSVGを描画するライブラリRaphael.jsを使って、 操作可能なレーダーチャートを描画するライブラリ Raphael Radar を作りました。 Raphael Radar は次の2つの機能を持ちます。 レーダーチャートをSVGで表示 レーダーチャートの各軸の値をフォームと対応づけて、インタラクティブに値を選択 (2)の機能は任意で無効化して単純なレーダーチャートとして利用することもできます。 入手と使い方 依存ライブラリ Raphael Radar を使う前に、2つのライブラリをインストールする必要があります。 Raphael.js (1.3.1 以降) jQuery (1.4.2 以降) もしうまく動作しない場合、Raphael.jsとjQueryのバージョンを合わせてみてください。 インストール方法 上記の依存ライブラリをインストール Raphael
IE9の登場で画像フォーマットの本命に浮上するSVG
3月中旬、米国ラスベガスで開催されたマイクロソフトの技術カンファレンス「MIX10」でInternet Explorer（IE）の次期バージョンIE9の概要が発表された。そこで、JavaScript実行速度の向上など、IE9における様々な強化点が発表された（関連記事）。中でも、筆者が関心を持ったのはHTML5への対応で、特にSVGの標準サポートを正式表明した点に興味を覚えた。 SVGとはScalable Vector Graphicsの略で、画像を扱うためのフォーマット形式である。JPEGやGIFなどと同じようなものと考えればよい。ただし、JPEGやGIFがラスター方式と呼ばれる画像を細かいドットで表す方式を使っているのに対し、SVGはベクター形式と呼ばれる画像を構成する線の位置や関係といった情報で表す方式を使っている点が異なる。ベクター方式を使うことで、画像サイズが携帯電話のような小さな
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
MacでもLinuxでも使える! 無償の Visual Studio Code を使用した Cordova 開発 - monoe's blog - Site Home - MSDN Blogs
ただ線がひけるだけのSVG