svgに関するSatoh_Dのブックマーク (5)
-
-
これは Vue.js #3 Advent Calendar 2017 – Qiita 4日目の記事です。 こんにちは。SVGで色々なコンポーネントを作っているものです。最近の作品は下記のような感じです。 Webでグリグリ動くUIを作りたい!!という一心でやっています。 これらはほとんどSVGとVueの組み合わせのみで作っています。依存が少ないというのは大事で、ライブラリ間の相性でハマったり、いろんなドキュメント間を往復することがなくなります。 Webでグリグリ動くUIを作るのは基本的にめんどくさいです。jQuery pluginを駆使して作るのも闇が多いですし、divやcanvasをゴリゴリするのも結構手間がかかります。 ですが、最近はSVGで高度なUI実装されることが増えてきた気がします。特に自分が衝撃を受けたのは、CacooがFlashからSVGにスイッチしたことです。 nulab-i
-
-
SVG Textの横方向の描画位置を調整する手段としてtext-anchor属性があります。text-anchorを使うことで、x=0の点をtextの左端、中央、右端に変更することができます(以下参照)。 text-anchor SVG Textのtext-anchor属性をつかってみた。 同じように、縦方向の描画位置を調整する、すなわちy=0の点がtextのどこにあたるかを調整する属性としてdominant-baselineを使うことができそうです。 text-anchorには12種類の値を設定することができます。D3.jsを使って全パターンを描画させてみました。 var texts = [ 'abcdefg', 'ほげほげ' ]; var params = [ 'auto', 'use-script', 'no-change', 'reset-size', 'ideographic',
-
最近、HTMLファイル内にSVGを直接記述できる﹁Inline SVG﹂と格闘中のkadoppeです。 今日は、たまたまSVGのtext要素を使って文字列を中央揃えにする必要があったので、それを実現するために使ったtext要素の﹁text-anchor﹂属性について簡単にメモしておきたいと思います。 text-anchor属性は、文字列を描画し始める基準位置を指定する属性です。 text-anchor属性が取りうる値は以下の3種類。 start middle end ﹁start﹂を指定すると、text要素のx属性/y属性で指定した座標が、文字列の左端に位置するようにテキストが描画されます。
-
1