[B! svg] bongkuraのブックマーク

bongkura id:bongkura

svgに関するbongkuraのブックマーク (11)

JavaScriptで変な形のクリック領域を作るとき、svgが便利 - MANA-DOT
昨日のVieraのリモコン、リモコンを作りたかったのもあるけど、svgとJavaScriptを組み合わせた簡単なプログラムを試しに書いてみたかったというのがあります。 html5ではsvgをhtml中に埋め込んで、更にそのsvgにcssでスタイルを当てたり、JavaScriptでいろいろやったり出来ます。この時、要素のクリック領域は要素の形そのままなので、昨日のリモコンのような変な形のクリック領域を簡単に作ることが出来ます。以下の画像の色のついた箇所にマウスを乗せたりクリックをしたりしてみてください。 100km 画像はWikipediaより。上記の画像は、クリックできる箇所に .svg-area というクラス名と、data-name属性に市町村の文字列が入っており、以下の様なcss/jsによって動作を実現しています。 path.svg-area { cursor: pointer;
bongkura 2014/05/10
svg

JavaScript
リンク
次のプロジェクトで使いたい、CSS3からSVGまでアニメーションを実装するスクリプトのまとめ
最近のウェブやスマフォのページで使われている効果的で面白いさまざまなアニメーションを実装できるスクリプトを紹介します。スクロールに連動してさまざまな要素がアニメーションで表示されたり、ページを表示する時にふわっとさせたり、画像にSVGでブラーをかけてテキストを載せたり、物理演算エンジンで慣性を楽しんだりなど、デモを見るだけでもかなりいい刺激がもらえるスクリプトばかりです。 Agile Agile -GitHub SVGやWebGLを使用せず、JavaScriptでCSS3アニメーションを生成するライブラリ。デスクトップの各ブラウザ対応だけでなく、スマフォやタブレットにもパフォーマンスが最適化されています。キーフレームやトゥイーンを使ったアニメーションが得意です。
bongkura 2014/05/02
svg

javascript

css
リンク
SVG-edit
Copy the contents of this box into a text editor, then save the file with a .svg extension. Done Image Properties Title: Canvas Dimensions width: height: Included Images Embed data (local files) Use file reference Editor Preferences Language: Icon size: Editor Background
bongkura 2010/10/27
svg
リンク
GitHub - tobitailor/gordon: An open source Flash™ runtime written in pure JavaScript
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
bongkura 2010/07/14
HTML5

SVG

iphone

JavaScript

library

flash
リンク
carto:net - SVG tutorial and example site
carto:papers:svg:examples carto.net SVG tutorial, example and demonstration site These samples of cartographic applications shall help you getting started with SVG ("Basic examples"). The basic examples come with commented source code. The more complex examples should showcase and demonstrate the usefulness of SVG for webmapping purposes. Please understand and apologize that we can't afford the ti
bongkura 2010/07/14
svg

tutorial

sample
リンク
SVGでゲームっぽいデモ
初回は、フォント読み込むまで文字が表示されなかったりします。 iPhoneでも動作を確認しました。素材 | SVGライブラリご意見などは、@masuidriveへ
bongkura 2010/07/13
svg

game
リンク
iPhone/iPadでSVG表示
こんにちは、気持ちは若手のponpoko1968です。 iPhoneアプリを作っていて、ロゴやアイコンなどの画像を表示したい事って、多いですよね。そういった場合、ラスター画像データは簡単に表示できますが、画面を拡大させたときに、画像が荒れてしまいます。そこで、拡大しても画像が荒れない、illustratorやInkScapeなどで作成されたストロークデータを使いたいと思いました。ところが、ストロークデータのファイル形式のなかでも標準化されている﹁SVG﹂形式のファイルを使おうと思ったのですが、意外と目的に合ったライブラリが見つからなかったりします。 iPhoneではUIWebViewというWebKitをラップしたビュー部品が用意されており、WebKitには、﹁SVG﹂というストロークデータの画像を表示する機能が備わっています。そこで、SVGの表示にUIWebViewが使えないか試して
bongkura 2010/05/26
iphone

svg
リンク
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
bongkura 2010/04/08
svg

jquery

JavaScript

chart
リンク
ただ線がひけるだけのSVG
bongkura 2010/03/02
svg

JavaScript
リンク
オンラインでドロー＆SVG保存·Closure Draw MOONGIFT
Closure DrawはJavaScript製のオープンソース・ソフトウェア。最近は何でもWebブラウザ上で動作するようになっている。メール、RSSリーダー、カレンダー、画像編集と何でもござれだ。そんな中、弱めだったのがドロー系アプリケーションだ。プロジェクトサイトで試せる元々ローカルアプリケーションでもあまり数の多くないドロー系だけに、Web上で使い勝手の良いものを作るのは難しい。だが幾つか候補が出てきている。一つは先日紹介したSVG-edit、もう一つは日本製のClosure Drawだ。 Closure Drawは直線、円、四角といったオブジェクトの他、文字や画像を埋め込むこともできるWebブラウザ上で動作するドローアプリケーションだ。できあがった図はSVGで出力できるので、保存すれば別なツールで読み込むこともできる。配置の変更やオブジェクトの移動ができる描いたオブジェクト
bongkura 2010/02/04
svg

library
リンク
見るべし、試すべし！オンラインのSVGエディター·SVG-edit MOONGIFT
SVG-editはWebベース/JavaScript製のオープンソース・ソフトウェア。時々こういうソフトウェアに出くわすからオープンソースの紹介は止められない。オンラインで動作するWebアプリケーションは多数存在し、画像編集すらオンラインで行えるようになっている。オンラインでSVGを作成、編集！そういったソフトウェアは大抵Flashを使って動作する。だがSVG-editは違う、JavaScriptのみで動作するのだ。jQueryを用いたソフトウェアになっており、Webブラウザ上でSVGファイルを編集、作成できるようになっている。まるで画像編集ソフトウェアのようなインタフェースをもち、右側に並んだツールアイコンを使ってドローができる。文字を書いたり、円や四角を描くこともできる。直線や自由線を描き、色を変更することだって可能だ。オブジェクトは描画後にドラッグして移動したり回転させることも
bongkura 2010/01/13
svg

jQuery

javascript
リンク
1