HTML5のInline SVGをJavaScriptで操作 (1/5)
HTML5で手軽に扱えるようになったSVG（Scalable Vector Graphics）。前回は、Inline SVG（インラインSVG）で基本的な図形を描く方法を解説しました。今回は、HTML5文書内に埋め込まれたインラインSVGをJavaScriptで制御します。 JavaScriptでSVG要素にアクセスする 最初に、制御対象となるSVGデータを作成しましょう。JavaScriptで制御したいSVG要素にはid属性を記述し、ID名を付けておきます。通常のHTMLタグ（要素）にID名を指定する場合とまったく同じです。たとえば<rect>（四角形）を制御したい場合は以下のように記述します（ID名は任意）。 <svg> <rect id="myBox" x="0" y="0" fill="red" width="100" height="80" /> </svg> ID名を指定してお
これは便利！SVGとJavaScriptを使った動的なコンテンツの作成 | しずかなかずし
こんにちは！ 週末にWebアプリの作成をやっているけど、なかなか時間がとれない、しずかなかずしです。 本日は、動的で面白いWebコンテンツを作る時にSVG（Scalable Vector Graphics)という技術とJavaScriptを使うととても便利だよ、というお話です。 作ったコンテンツは以下のようなモノです。 上の画像は、SVGで作ったものです。 なにが「動的」なのでしょう？ 実は、画像の中の、温度、湿度は現在の私の書斎の実際の値です。部屋の温度・湿度が変われば表示が変わる。つまり、そこが動的なのです。 それでは、この画像がどのようにできているのかを紹介していきます。 SVGを使うと何ができるのか？ SVG（Scalable Vector Graphics)はその名の通り、「ベクター」を使ってWebコンテンツを表示する技術。HTMLと同様、テキストベースのマークアップ言語です。「
SVGをcanvasで使う - Qiita
この記事はACCESS Advent Calendar 1日目の記事です。 こんにちは ACCESS開発本部IoT開発部の渡辺 (@sassy_watson) です。 今回は私がSVGをcanvasで使う方法についての記事を書こうと思います。 SVGとCanvas SVGはただのベクターグラフィックスというだけでなく、 マスクやクリップだったらグラデーションやフィルターだったり いろいろ高機能なのが魅力です。 ただ、XMLなのでJavaScriptでなにかしようするときのDOM操作が面倒くさいです。 一方、CanvasはAPIが簡単なのでJavaScriptで扱いやすいというメリットがあります。 SVGをCanvasで使う そこで、SVGで使いたい機能をSVGで書いて、canvasに貼り付けるというアプローチが考えられます。 素材はillustratorでつくって、Canvasでペタペタ貼
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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Change SVG path color on Canvas
