Textures.js
SVG patterns for Data Visualization Textures are useful for the selective perception of different categories View on Github Getting started -- from the top of d3.js -- var svg = d3.select("#example") .append("svg"); var t = textures.lines() .thicker(); svg.call(t); svg.append("circle") .attr("r", radius) .style("fill", t.url()); Lines
SVGのテキストを自動改行させる方法 - プラグインレスでSVGを表示する「SIE」開発ブログ
クロスブラウザで自動改行 クロスブラウザで、プログラミングの知識がない人でも、SVGで自動改行できるよ、というお話です。 以下のSVGをご覧下さい。 <html xmlns="http://www.w3.org/xhtml/1999"> <div style="width:100px;height:100px;font-size:20px">Hello, World! ありがとう、さようなら。それから、こんごともよろしく</div> これを、インラインSVGでも、単独のSVGでも何でもいいので、ブラウザで表示すると、div要素の文字列が自動改行されているはずです。 とりあえず、Firefox23とOpera17で確認ました。 注意点 テキストを文字列ではなく、画像として扱いたいときには、上の方法ではなくて、text要素とtspan要素をお使いください。tspan要素はx属性と、dy属性だけ
How to achieve 'donut holes' with paths in Raphael
I'd like to draw a shape which has holes in it such that I can fill the shape it and not have the holes filled with that colour (leave them transparent). According to the W3 path spec: Compound paths (i.e., a path with multiple subpaths) are possible to allow effects such as "donut holes" in objects. Can somebody please give a very simple example of how to perform this with a vector path in Raphae
BonsaiJS
Introduction Bonsai is a JavaScript graphics library. Bonsai's main features include: Architecturally separated runner and renderer iFrame, Worker and Node running contexts Paths Assets (Audio, Video, Images, Fonts, SubMovies) Keyframe and time based animations (easing functions too) Path morphing and much more... Community For the finer details, see the documentation. #bonsaijs on irc.freenode.ne
SVG & CSSでアンサガのスキルパネルのようなメニューを作る
「SVGにチャレンジ！ 第1回」です。第2回があるかは分かりません。 インラインSVGを使って『アンリミテッド：サガ』というゲームのスキルパネル風のメニューを作ります。 実物は「アンリミテッドサガ スキルパネル」とかで画像検索してみてください。 このスクエアさんの『アンリミテッド：サガ』というゲームがすごく好きでですね……以前からこれをウェブページとして作ってみたいと思っていたんですよ。 クリッカブルマップとかも考えましたが、あれあまり好きじゃない。 というわけでSVGでやることにしました。拡大しても綺麗ですしね！ Unlimited Saga Style Panel Menu with SVG & CSS デモファイルをダウンロード 表示確認で一番期待通りに表示できたのは、Firefox 7とChrome 16 devです。 IE 9とSafari 5.1は、transitionしません
ハタさんのブログ(復刻版) : 横書きのままタテに表示するアレ
最近よく見かけるようになった、スクロールバーのとこにくっついてくるアレ (follow me とか) (feedback とか) 問題は、これがスクロールについてくることじゃなくて、横書きなのに、縦に表示されているってこと。 これ、どうやるんだろう...。 (中略) やっぱここは流行りのSVGだよね。ってことで、やってみた(注:Firefox,Chrome以外動かないと思う) ref - http://xole.net/svg.html 横書きのままタテに表示されるようになったけど、リンクが動かない...。 しょうがないので、onclickで逃げる。 ソースは↓ (function (){ var anchor = function (href, str){ var svg = document.createElementNS('http://www.w3.org/2000/sv
Adam Barth「WebKitがウェブページをロードするしくみ」 - 以下斜め読んだ内容
Surfin' Safariの2010.4.18のブログエントリ。 記事では作者はabarth（post by abarth）となってる 歯が立たない。が読んだ How WebKit Loads a Web Page 以下斜め読んだ内容 レンダリングの前にページと各種コンポーネントのロードが必要 このエントリはWebCoreとページロードの関係について エントリで説明する部分を図にしてくれてる オリジナル（SVG画像） WebCore＝レンダリング処理をするWebKitのコンポーネント ページロードは二本立て ドキュメント（ex.html）をロードし、Frameオブジェクト生成するライン 画像や外部jsなどをロードするライン FrameLoaderオブジェクト ドキュメントをロードする ドキュメントをFrameオブジェクトに変換 DocumentLoaderオブジェクトを生成 トリガー例：
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
ブラウザ上でお絵かき: Days on the Moon
「Ajax を使った手書き文字認識」を見て。ここでは線を描くのに絶対配置の span 要素を大量生成しているけど、最近のブラウザってベクター描画エンジン付きのものが多いわけで。WinIE 5 以降の VML 、Opera 8 ・ Firefox 1.5 以降の SVG 、Safari 1.3 ・ Firefox 1.5 以降の canvas 要素といった具合に。 ということで各ブラウザでベクター描画エンジンが使えればそれを使い、なければ絶対配置の HTML 要素を大量生成することで、ブラウザ上でお絵かきできるというものを作ってみた。元に戻す / やり直すこともできる。線を描くだけで塗りつぶしはできないが。 その線を描くために作ったのが DrawingCanvas クラス。以下のようにすることで三角形が描ける。実際の描画部分には SVG Tiny 、HTML Canvas 、CSS Posi
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
ただ線がひけるだけのSVG