[B! SVG] t-murachiのブックマーク

ついに、Webアプリでの帳票印刷のベストプラクティスを編み出しました💡

PHPカンファレンス 2021 1週間前イベント〜帰ってきたPHP勉強会@東京の発表資料です。 https://phpcon.connpass.com/event/224128/

t-murachi 2021/09/25

SVGってブラウザ依存が結構でかいイメージがががが

リンク

SVG背景画像でwidthとheight属性が100%だとIE11で中央寄せになってしまうバグ

先日、予想外のところでIE11のバグ︵現象？︶に出くわしたのでメモしておきます。 svgタグのwidthとheight属性に100%が指定されたSVGをCSSで背景画像に指定すると、IE11だけ配置の指定を無視して中央寄せになってしまうバグです。このバグは背景を指定する領域のアスペクト比がSVGのそれと異なる場合に表面化します︵アスペクト比が同じ場合、バグに気づきません︶。 ※SVG伝道師の松田さんが﹁一概にバグではないと思う﹂とツィートされていたので参考までに仕様へのリンクを記事の最後に追記しておきました。バグが発生する条件とデモ実際の表示はデモページでご覧ください。IE11で見ると一番最初の三日月だけ、中央寄せになってしまっています。デモはこちらこのバグはSVGとCSSで以下のサンプルコードのような指定をすると発生します。 SVG 下の画像のようにサイズが132 x 160p

t-murachi 2019/10/12

今のこのご時世にIEの未発見のバグに気づいてあげられるとかどんだけ優しいんだ…(´；ω；｀)

リンク

SVGアニメーションの現状 | POSTD

SVG︵Scalabe Vector Graphics︶の世界は魅力的です。そして、これを使ってできることや、これに用意されているオプションには圧倒されてしまうほどです。 SVGはXMLベースの2次元ベクター画像形式で、インタラクティビティとアニメーションをサポートします。言い換えると、SVGは図形やグラフをレンダリングするXMLタグで、その図形やグラフはHTMLの構成要素がそうであるように、インタラクトしたりアニメーション化したりできるのです。 SVGに関して、私がよく受ける質問の1つは、SVG画像のアニメーション化についてです。そのやり方だけではなく、それが何なのかということも聞かれます。ですから、現在の︵そして未来の︶SVGアニメーションの状況を見ながら、あなたが苦痛を感じずに行えるようなヒントやツールについてお話ししましょう。同期マルチメディア統合言語、またの名をSMIL︵Syn

t-murachi 2015/07/10

なんか Flash を置き換える存在としてすげぇ期待されてたみたいな感じだったはずなのに激しくダサいことになっとるな。結局は JavaScript だのみ、 HTML から切り離された SVG 単独では動きまわることもできなくなるとか…。

リンク

svg要素の基本的な使い方まとめ

この文書ではsvgをhtml埋め込みデータとして扱う際の覚書として作成した．svgの要素と属性は実際の例を踏まえて説明したつもり．注意事項仕様はここを参照のこと．本文書では実際の挙動を調べつつ自分なりの解釈が入っているため，多々間違いが入ってしまうかもしれないが，気にしない．スクリプトを使ってsvg要素の中身(ソース)を出力しているため，一部実際のコードと表示されるコードとの間に差異があるが，予めご了承いただきたい．目標は見栄えのする図形をsvgの手入力でサラっと記述できるようになることなので，複雑な図形は素直にinkscape等専用のツールを使うと良い．ただ，ここで示したことはツールを使う上でも役に立つと思う．特にアニメーションなど． svg:ベクター画像のカンバスの定義，title:タイトル，desc:説明 html文書においてsvg画像を挿入したい場合,embed要素を用い

t-murachi 2012/09/15

よくまとまっとる。ありがたい。

リンク

svg要素の基本的な使い方まとめ - 11.画像効果

t-murachi 2012/09/15

enable-background 属性が使えるのは現状 opera 様のみと… orz / しかしよーまとまっとるなぁ。

リンク

はらぺこ日誌» ブログアーカイブ » SVG の要素を JavaScript で生成して DOM ツリーに追加しても何も表示されない←んなこたぁない

(投稿直後に追記: この問題は既に解決しております…) ご無沙汰しております…。決算期が近づいて参りましたね。今期はほとんど売上立ってませんが… orz それはさておき、新しい仕事で使うことになりそうな技術の調査がてらプロトタイプ作りを進めようとしているのですが、HTML5のインライン SVG を DOM から操作する際、IDから要素を参照してその写像を表示する <use> 要素の扱いについて疑問点があったので、ちょっとメモしておくことに。 <use> エレメントについてはW3C の仕様勧告にサンプルがあるのですが (インライン SVG として簡略化して書くと以下のような感じ)、 <svg width="10cm" height="3cm" viewBox="0 0 100 30"> <defs> <rect id="MyRect" width="60" height="10"/>

t-murachi 2012/08/10

だれか教えて… orz / (追記)解決しました! @teramako 先生 thanks! @DEFGHI1977 さまもお騒がせしました… m(_ _)m

リンク

SVGのテキストとMedia Queries | 水無月ばけらのえび日記

公開: 2012年2月13日16時10分頃最近、SVGを使うことが多くなってきたのですが、テキストの処理がHTMLとは少し異なり、やや癖があります。そのあたりを少しメモしておきます。テキストの改行HTMLの場合は、要素内に適当にテキストを書くと、その要素の中にテキストが表示されます。要素の幅に対して長いテキストが入った場合は、テキストは自動的に改行されます。 SVG1.1の場合、テキストを置くにはtext要素を使い、text要素自体にx属性、y属性で座標を指定して配置します。この要素には幅という概念がなく、テキストが自動で折り返されることはありません。SVG1.1では﹁自動改行はない﹂という旨がはっきり書いてあります。 SVG performs no automatic line breaking or word wrapping. To achieve the effect of m

t-murachi 2012/03/15

ベクタグラフィック中のテキストなんて、当初想定される用途はラベルとか注記とかだからね。ドキュメントと同じノリで文字列を扱えないのは当然だと思ってた。 Chrome の動作は正直ちょっとどうかと思うけど。

リンク

SVGをobject要素で活用する | 水無月ばけらのえび日記

更新: 2012年2月24日23時20分頃 SVGというものはずっと昔からありました。かつてはブラウザ側の対応がいまいちで、プラグインを入れたりしないと表示できなかったりもしており、あまり使われていませんでした。しかしIE9がSVGに対応したことで、かなり使えるようになってきた印象があります。最近では仕事でもガチでSVGを使うことが増えてきています。 SVGの特長のひとつは、ベクターグラフィックなので伸び縮みに強いという点です。サイズ可変の領域にうまい具合に背景を敷きたいときには便利です。そして、最近はサイトのコンテンツ全体がサイズ可変ということも増えてきました。というか元々可変ではあると思うのですが、Media Queries (www.w3.org)を使った派手な変更を伴うパターンが増えてきて、画像のサイズを大幅に変更したいケースが増えてきています。写真などはJPEG画像を拡大・縮小

t-murachi 2012/02/13

SVG とレガシー IE との共存方法。