xslでブラウザ判定をしてsvgの描画内容を変更する
webブラウザは以前よりも標準化されてきたとは言え，まだまだ細かい部分で動作が安定しておらず，ブラウザ毎のコードを必要とする場合もあります．その際に必要となるブラウザ判定処理は意外に面倒で，これといった決定版が無いといった問題があります． 今回紹介するxslを使ったブラウザ判定はこの解決策とは成り得ないものの，知っているとちょっと便利かもしれません． xslとは xslはxml文書に対するスタイルシートの一つで，一般的なcssと同様に文書に対する見た目を制御する役割を持っています．ですが，cssよりも強力な仕組みを備えており，xml文書の構造そのものを変更することができます．つまり，元の文書はそのままに，見た目を（x）htmlやsvgの他にもプレーンテキストやcsv等に変換することができるのです． その役割上xslを直接htmlに適用することはできませんが，元々xmlをベースとしているsv
XML －SVG（Scalable Vector Graphics）３－
■ SVGの生成 XSLTを使用してXMLのデータをSVGで棒グラフとして表示します。SVGファイルの生成には「 msxsl.exe」を使用します。 ではまず、サンプルとなるファイルを作成してみます。 使用するファイル名は「svgxml08.xml」「svgxsl08.xsl」、 生成するsvgファイル名は「svg08.svg」とします。 ■ svgxml08.xml <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet href="sam.xsl" type="text/xsl"?> <表> <値 id="１列">50</値> <値 id="２列">100</値> <値 id="３列">180</値> <値 id="４列">200</値> <値 id="５列">90</値> <値 id="６列">170</値> </表> ■ sv
SVG標準化の最新動向
Web業界発注制作の教科書 発売記念セミナーで使用したスライドです。発注者向けのWeb制作トラブルを回避するための事前確認ポイントなどを現場レベルでお話ししました。
Knotter 日本語情報トップページ - OSDN
Knotterは高度な設定がインターレースデザイナーです。 インターレースパターンは歴史的に多くの場所で、異文化での装飾として使用されるデザインの一種である、いくつかの例は、ケルトknotworksとイスラムインターレースです。 Knotterは、そのユーザが直感的な方法でそのようなパターンを設計し、外部の汎用グラフィックソフトに結果を統合するための簡単な方法を提供することを可能にすることを目的とする。 この目的のために、Knotter内で作成されたデザインは、カスタム、人間が読める形式で保存することができ、スケーラブルベクターグラフィックスとしてラスタ画像フォーマットの広い数のエクスポートが可能です。 ダウンロード 最新ダウンロードファイル knotter-0.9.6-windows-64.zip (日付: 2013-12-19, サイズ: 12.73 MB) knotter-0.9.6
SVGに対する誤解を紐解く
憎きieがようやっと世代交代するにあたり，今年こそSVG元年となるべく，(個人的に)頑張らにゃいかん，そんな気がするんですが，そうは行っても世間的にはsvgはまだまだマイナーな存在であってwebを眺めると結構な思い込みとか偏見とかが見受けられます．まぁ別に構いやしないんですが，SVGのポテンシャルを引き出すにはより良いSVGへの理解は必須ですから，ひとつ私見ではありますがよくあるSVGに対する誤解に意見してみようかと． つーかHIT数多すぎてびっくりしているんよ ちょこちょこ追加していくよ Thanx @rikuo . 注意・2014/01/16 この記事はある程度SVGについて調べた上で読むことをおすすめします．そうすることでSVGを”理解した後に生まれてくる”数々のモヤモヤが解消することでしょう．（筆者もかつてそうでした） 逆にSVGに不慣れな人が読んだ場合，却って理解を妨げる危険があ
Shape Hover Effect with SVG | Codrops
In this tutorial we’ll recreate the hover effect as seen on The Christmas Experiments website. We’ll be using SVG for the shape and Snap.svg for animating it on hover. If you have visited the fantastic new edition of The Christmas Experiments then you might have noticed the really cool hover effect in the Christmas calendar that uses a triangular shape. The shape is made up of a triangle using bor
SVGヤバイ 2013冬 - fragmentary
Chrome 31がStableになって久しい。何が変わったのか思い出せないんだけど、ひとつだけ覚えてるのがこちら。 (@156422) - b87d44f — Allow SVG images to not taint the canvas with drawImage/drawPattern WebKitのパッチをマージしたものらしい。ちょっとずつ離れているらしいけど、まだお互い共有できるパッチもあるんだね。 さて、このパッチによって、CanvasでSVG画像をdrawImage()などで描画したとき、条件によってはそのCanvasがtaintされなくなった。 Tainted Canvasとは CanvasにはdrawImage()など、画像をCanvasに描画するメソッドがある。ここで、スクリプトとsame-originではないとこにある画像を描画してしまうと、セキュリティ上の都合か
SVG2で検討されているプロパティ - Unreviewed
CSS Property Advent Calendar 2013の12日目の記事です。 もともと:futureや:pastなどを考えていたのですが、9日目にTime-dimensional擬似クラスについて調べてみたで書かれています*1ので、今日はSVG 2で検討されているプロパティを2つ見てみます*2。 paint-orderプロパティ SVGの描画モデルでは、図形やテキストは、まずfillが描画され、次にstrokeが描画され、その上にmarkersが描画されます（SVG 1.1ではRendering ModelのPainting shapes and textを参照）。 ですが、時と場合によってはこの順番を変えたい時があります。特にfillとstrokeの順番を変えたいときがあります。strokeは、strokeの中心がオブジェクトの縁（アウトライン）にあうように描画されるので、太
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - lugolabs/circles: A lightweight JavaScript library that generates circular graphs in SVG.
