ウェブフォントを利用すると個性的なテキスト表示ができますと前に書きました。 ウエブフォントの使い方 - jnobuyukiのブログいろいろ実験してみたところ、表示に関して、ブラウザのレンダリングでうまくいかないところがあったので、シェアします。 ウェブ…

特定の要素やある段落のフォントを設定するのはCSSで簡単に設定できます。しかし、今回は一続きの文の各文字のフォントを変えてみます。こういう時はJavaScriptが便利です。 テキストボックスの設定(HTML) 今回は、入力された文を読み取って、各文字のいろい…

今回はSVGオブジェクトの上に設定したテキストをいろいろな向きに反転する方法をまとめます。 ポイントは次の2点です。 text要素ではなくその上位のg要素で反転させる 反転に伴ってテキストが移動するので補正する 反転はテキスト要素ではなくg要素 SVGオブ…

今回は色を混ぜるという話です。色を混ぜるといっても二種類のやり方があるので、それを整理しながら、D3.jsでSVGオブジェクトの色を変換する方法を紹介します。 混ざると明るくなる加法混色 混ざると明るくなるのは、いわゆるRGBに基づく色の場合です。光の…

SVGオブジェクトでたくさんのテキストを表示をする場合、\nのような改行コードが認識されません。 仕様で改行ができないようです。でもD3.jsを利用すれば比較的簡単に改行を行うことができます。 テキストの準備 ここでのポイントはテキスト全体を改行位置で…

このブログではSVGオブジェクトをよく取り上げてきました。いわゆるペイントのようなソフトなしで図形を描けるので、とても便利です。しかし、不便なこともあります。その一つが重なり順序の統制の問題です。 SVGオブジェクトの重なり順 単一のSVGオブジェク…

今回は、読書の話をします。読書中、あなたの「意識」はどんなふうに進んでいると感じますか？私は、特に難しい言葉などがなければ、一定のスピードで言葉を理解していると感じます。「流れるように意識が文字の上を通り過ぎていく」というのが感覚的にぴっ…

SVGオブジェクトに画像ファイルを読みこむ際、周囲の形を変形させたいことがあります。イラストレーターのクリッピングマスクを利用した画像の切り取りのような場合です。javascriptでこれをやろうとすると、クリッピングパスの作り方が少しややこしいです。…

前回、transitionを利用して画面上を円が駆けるアニメーションを作りました。 その際、先に座標データを連想配列として準備しておきました。 円の中心座標が、次々にその座標データを読み込んで移動しました。 今回は、ちょっと違う切り口で円が駆けるアニメ…

前の投稿で、D3.jsのtransitionを利用したsvgオブジェクトの変化を扱いました。 Flashに頼らずとも、簡単にオブジェクトを移動できる点がすばらしいと思います。今回は、その続きです。 transitionを利用して、オブジェクトが設定範囲内を文字通り「駆け巡る…

D3.jsの最大の特徴の一つがtransitionを利用したアニメーションです。今回は、これを利用してsvgオブジェクトが画面内を移動する方法を紹介します。 transitionとは transitionはhtmlにおいてDOM要素に時間的な変化を加えるための機能です。新たな要素を加え…