サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
やる気の出し方
defghi1977.html.xdomain.jp
4.図形の変形 基本図形だけでもグラフィックを描くことは可能だが,何れも座標が固定化されているので位置の変更やサイズの変更を行うのが面倒である.このような操作を簡略化するためtransform属性が提供されている.これはcss3でのtransform属性とほぼ同様の機能を提供する. transform属性:座標軸の変形 svgにおける図形要素の描画は,通常その要素が属するコンテナ要素(svg要素,symbol要素,marker要素等)のveiwBox属性の値に従って行われる.即ち,viewBoxから定まる座標軸とスケールを元に図形要素の実際の描画位置が計算される.ここで,この座標軸を変形する事を思い浮かべてみよう.同じ図形要素であっても,描画する基準が異なるため,座標軸の変形度合いに応じ描かれる図形が変形することだろう. この座標軸の変換をアフィン変換と呼び,svgではこの変換をtrans
9.グラデーションとパターン 見栄えの良いグラフィックには色のグラデーションは欠かせない.SVGにおいても然りで,本項ではこのグラデーション処理を表すグラデーション要素について説明する.また同様に塗りつぶしに利用されるsolidColor,pattern,hatch要素についてもここで取り上げる.なおこれらの要素による塗り潰し機構をSVGではペイントサーバと呼んでいる. グラデーションの基本構成 グラデーションは塗り潰しに用いる色を徐々に変化させることで,単色によるものに比べて滑らかな見た目をもたらす.グラフィックを描く場合には必須な機能であり,SVGにおいても帯状にグラデーションを掛けるlinearGradient要素と放射状に掛けるradialGradient要素, 及び不定形グラデーションを定めるmeshGradient要素の3つが提供されている. SVGによるグラデーションはCSS
16.フォント定義 いかなる環境においても同じ文字の見た目を提供するため,SVGにはフォントを定義し,自分自身に埋め込む仕様が定義されている.本項ではこのフォント機能についてその概略について述べる.非常に広範な知識が要求される割にSVGフォントを直接サポートする環境が少ないので利用する機会がそれほどないものの,簡単にフォントを作れるのは非常に魅力的であり,場合によっては非常に役に立つこともある.なお,本ページの記述は参考となる資料や動作環境の貧弱さから曖昧な点や不足が多々ある事を予めお詫びする.また実際の動作を確認する場合はchrome等のwebkit系のブラウザを利用してほしい.operaでは一部動作が不安定な箇所があるprestoエンジンをサポートするOperaで行って欲しい. SVGフォント 重要)2014/10以降Windows環境の一部を除きChrome/Opera等のブラウザに
11.画像効果 フィルター効果を用いることでそのままでは印象の薄い平面図形に様々な表情を持たせることができる.本項ではこのフィルター効果について説明する.SVGの持つ機能の中でも特に仕様が複雑なものの一つである. filter:画像効果 filter要素は図形に対しての視覚効果を表す.元の画像・図形を維持しつつ,見た目の変更・装飾を行えるため非常に魅力的な機能である.一般に画像はその構成する画素毎にrgb値と不透明度(alpha)値とを定めるが,filterはこの色に関わる4つの値を画素毎に編集するだけである.従ってサイズを変えたり回転させるといった画像の変形を伴う操作については原則transform属性を用いねばならない.なお,filterによる画像効果は暗黙的なラスタライズを引き起こし,本質的に重いため掛け過ぎてはならない.特にフィルターを掛ける領域が広くなるほど負荷が高くなる. fi
written by DEFGHI1977 [重要] auonenetホームページ公開代理サービス終了に伴い、公開済みの各種ドキュメントをxdomainサーバーに移行しました. 旧アドレスへのアクセスは本ページにリダイレクトされます. お手数ですがブックマークやリンクなどのURL参照先の更新・変更をお願いいたします. You were redirected from old "dion(auonenet)" page which had been out of service. Please update URL settings of your bookmarks, links or more. Thank you. 突貫工事で作ったため, 抜けがあるかもしれません. ゲームツール等(game tools) 悪魔城ドラキュラHoD(Castlevania HoD)・アイテム早見表(Cas
15.スクリプティング htmlと同様にsvgにおいてもjavascriptを用いてその内容を操作することができる.svgを描画するjavascriptライブラリとしてはRaphaël—JavaScript Libraryが有名だが,本項ではより応用の効く,直接svgのもつapiを使ってグラフィックを描く方法について示す.因みにRaphaëlの使い方は別の項で述べる.なお,htmlでのjavascriptの利用法を理解していることを前提としているので,内容が解りにくかった場合は別途他のサイトを参照して欲しい. script:スクリプトによる動的グラフィック script要素はsvgファイル内部にjavascript(厳密にはapplication/ecmascript)によるプログラム処理を記述するためのもので,htmlにおけるscript要素とほとんど同じ機能をもつ.htmlファイルにお
3.図形の描画と図形のグループ化 SVGにおいてはグラフィック描画の手続きをXMLツリーとして表現する.様々な要素の組み合わせで複雑なグラフィックを構成するのだ.本項では最も基本のpath要素とその他の基本図形要素,及びg要素による図形のグループ化について説明する.これらの要素はSVGを表示可能な全ての環境で動作し,簡単なグラフィックであればこれだけで十分に間に合う. path:パス図形の描画 path要素は任意の図形を表す.図形定義が柔軟に行えるが,円や四角などの単純な図形を描画するだけなら後述する専用の要素を使ったほうが良い. パス図形の定義 d属性には曲線を引く際のコマンド(パスコマンド)のリスト(パスデータ文字列)を指定する.パスデータ文字列の前から順にコマンドを実行し,得られた(曲)線に囲まれた領域をパス図形と呼ぶ.SVGにおけるグラフィックはこのパス図形を元に描画される. d属
@��m�U
どんなことができるの? html5技術をベースとしているため,(がんばれば)どんな処理を行うことも可能です.外字であればwoffファイルを用意すればよく,バーコード出力も画像さえあればレポートに挿入することができます.また,svgソースの取り込みをサポートしているので,d3.jsで作成したグラフをレポートに挿入するといったことも可能です. レポートのひな形の作成にはinkscape等のツールを用いるかsvgを手書きします.それを付属のレポートマッピングツールを介することでレポート設定を追加します. ブラウザ互換性は? ie10とfirefoxとchromeで動作します. opera(presto)では動作しないようです(動作している?).safariでは基本動作はするものの,意図した通りの結果は得られません. しかし「完璧」には動きませんし,古いバージョンで動作するかは全くわかりません.i
8.文字列の挿入 svgではテキストをグラフィックの構成要素として扱うことができる.本項では基本となるtext要素とそれに関わる要素群について示す.svgが文書形式としての役割を果たす上で,その中心となる要素である. グラフィックとしての文字列 svgはhtmlと同様に文字列を挿入する機能を備えている.htmlにおけるspan要素に似ているが,1文字づつ表示位置・回転を調整することが出来る為,豊かな表現が可能となる.この機能はポスターや地図を構成する上で必須と呼べるものであるが,svgにおけるテキストはあくまでもグラフィックを構成する一部分として扱われるため,htmlや他の文書形式で有効となる禁則処理等の制御は一切行われず,全てのレイアウトの責任は実装者に委ねられている.従って文字列を文章として扱いたい場合は,htmlを使ってsvgグラフィックの上にhtml要素を重ねるとか,foreign
1.svgの基礎知識 本項ではsvgを取り巻く背景や,その特徴・役割について解説する.グラフィックを描きたいだけなら読み飛ばしても差し支えないが,なぜ今更svgなのか,svgが存在する意義を知っておくことで,適切な技術の選択が出来るようになるはずだ. svgとは svg(Scalable Vector Graphics)とはxml(eXtensible Markup Language)を基盤とした2次元画像記述言語である.w3cにより標準化された.svgで記述されたsvgファイル(拡張子.svg)はjpgやpng等の画像ファイルと同様にグラフィックビューアやブラウザ等での表示が可能である. このsvg形式の画像の特徴としては次のようなものが挙げられる. 1・ベクタ形式のグラフィックを表現する 画像をベクタ形式で取り扱う. 一般にjpg,png,gif,bmp等の画像形式はビットマップ(ラス
12.アニメーション プロセッサ性能が向上した今日,アニメーション処理による動的なグラフィックは様々な場面で利用されている.svgにおいてもこのアニメーション処理を利用するための機構が定められており,ここではanimate要素を基本としたその使い方について述べる.ただ実用に耐えうるかについては現行ブラウザの対応状況を含め不透明と言わざるを得ず,利用する場合はその点を踏まえて慎重に導入したい. アニメーションの構成要素 アニメーションを構成する要素としては次のようなものが考えられる.何れもアニメーションには欠かせない要素である. アニメーションを開始,終了するタイミング いつ実行され,いつ終了するか.もしくはどのくらい継続させるか,何回繰り返すか等. アニメーションの対象 アニメーションを行う際のキャラクターに相当する他,手を動かすのか足を動かすのか等. アニメーションをどのように行うか 例
]]> 詳しい呼び出し方についてはRaphaël.js関連のドキュメントを参照してください.※なお,詳しい動作検証を行ったわけではありませんので予めご了承ください. Snap.svg用のjavascriptライブラリ 現状ではSnap.svgを用いたライブラリは限られていますが,今後様々な用途のものが公開されていくことでしょう. Animated SVG Icons トグル機能付きのアイコンを作成するためのモジュール.MITライセンスにて公開されています. snap.svg.zpd Snap.svgにズーム・パン・ドラッグ機構を追加するプラグイン.BSDライセンスにて公開されています. Snap.snip 本ページを作るにあたって筆者が作ってみたプラグインです.Snap.svgのプラグインの作り方のサンプルとしてご活用ください. ※Snap.svg0.3.0で動かなくなった機能があります.
canvas要素の概観 canvas要素とは canvas要素はWEBブラウザ上(クライアントサイド)で動的にグラフィックを描くための仕組みです. もともとApple社が自社製品の機能向上を目的に, WEBブラウザSafariの独自拡張として策定したものでした. が, その利便性が認識されるとMozilla(FireFox)やOpera等のブラウザベンダーも追随するようになり, HTMLにおける事実上の標準仕様として認識されるようになりました. この流れから, HTML5ではWHATWG/W3Cによって正式に仕様として取り入れられ, 現在Internet Explorerを含むほとんどのブラウザ上でcanvas要素が利用可能です. canvas要素の役割 canvas要素はグラフィックの入出力及び分析を可能とするノードです. canvas要素に描かれたグラフィックはimg要素で表示している
written by DEFGHI1977 はじめに 本ページは昨今注目の集まりつつあるWEBの部品化技術・Web Componentsについて解説しています. なお, 筆者の学習成果としてのメモ書きですから, おそらく内容については多々間違いが含まれていることでしょう. その点を踏まえた上でお読みいただけるとありがたいです. なお, 単なるまとめにしては「長すぎる」かも知れませんが, 出来る限り順に読み進められるように構成しているつもりなのでそこの処ご容赦ください. あろうことか, タイトルにスペルミスが… orz... 前提 Web ComponentsではJavaScriptを多用します. そのため, ある程度JavaScriptの知識がある方向けの記事になっています. 間違っても並行してJavaScriptを学ぼうとしないでください. 本記事はある意味JavaScriptにおけるメ
written by DEFGHI1977. 本文書はasm.jsについてその使い方についてまとめたものです. 通常asm.jsスクリプトは手で記述することを前提としていませんが, 簡単な記法を憶えるだけで処理速度の向上が見込めるのはやはり魅力的です. 昨今はasm.jsをサポートする環境がひと通り揃いましたから, その使い方くらい知っておきたいところです. が, その一方でどのように記述出来るのかについての資料に未だ乏しいのが実情です. そこで, asm.jsスクリプトのサンプルコードを実際に書いてみて, どのようなコードがコンパイルエラーとならないのかについて調べてみました. コードは全て実際に動作しているものですから, 開発ツールを開き, コンソール上に正常にコンパイル出来た旨のメッセージが表示されていることを確認してください. 実は資料に乏しくて取っ付き難いだけで, さほど難しい代
written by DEFGHI1977. 本文書はWeb Animations仕様が定義しているAPIを使ったアニメーションの作成方法について調査・試行錯誤したものをまとめたものです. スクリプトによるアニメーションは, いざ実現しようとすと考慮すべき点が多々ありどのように実装するか悩みがちです. そのため, ブラウザ側で標準的な仕組み(フレームワーク)を用意してくれることは意義のあることです. とは言えフレームワークを使いこなすにはその意図することころを理解しなければなりません. こういった経緯からAPI呼び出しに伴う“つまづき”を少なくするために実際に動作するサンプルを交えた解説ページを作ることとしました. 作者も手探り状態から少しずつ内容を掘り下げていますので内容には多くの間違いがあるかもしれません. 予めご了承の上ご利用ください. つーか, 仕様と説明との間のギャップが激しいA
目次 svgの基礎知識 svgを取り扱うにあたっての心構えや,取り巻く環境について説明する. svg要素とsvg文書 svg文書の基本となる事項について説明し,htmlでの取扱いについて説明する. svg要素 図形の描画と図形のグループ化 svgで図形を描く上で最も基本となる要素について説明する. path,line,rect,circle,ellipse,polyline,polygon,g要素,stroke属性,fill属性,color属性 図形の変形 図形の変形について説明する. transform属性 図形の定義と再利用 svgのモジュール化と画像の読み込みについて説明する. defs,use,symbol,image要素 スタイル設定 svgにおけるスタイルの指定とxslによるsvgの生成法について解説する. style要素 マーカーの定義と設定 線要素の端点図形について説明する
20.D3.jsによるグラフの描画 svgを利用するにあたって,まず思い当たることとしてはグラフの描画への応用であろう.簡単なものであればsvgdomを直接操作するだけで十分対応できるが,ここではD3.js.を用いた簡単なサンプルを紹介する.D3.jsは元来データ指向のドキュメント生成フレームワークであるが,svgの出力にも対応しており,グラフの生成を簡潔に行える.なお本ドキュメントではバージョンはv2.9.2を使用した. D3.jsについて D3.js(Data-Driven Documents)はその名の通りデータ駆動のドキュメント生成を行うjavascriptフレームワークであり,グラフ等によるデータの視覚化(データビジュアライゼーション)を簡潔に実現することが出来る.データの視覚化とは,そのままでは意味を見出しにくいデータの塊を,何らかの方法で目に見える形に変換し,その中に秘められ
このページを最初にブックマークしてみませんか?
『Xdomain サーバー初期ページ』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く