home ホーム search 検索 -  login ログイン  | reload edit datainfo version cmd icon diff delete  | help ヘルプ

技術/HTML/SVG参考メモ

技術/HTML/SVG参考メモ

技術 / HTML / SVG参考メモ
id: 1457 所有者: msakamoto-sf    作成日: 2019-02-09 17:59:21
カテゴリ: HTML SVG 

参考資料

MDNのSVG資料:

入門記事:

SVG viewBox属性について:

実際に触ってみた時に遭遇したTIPS

塗りつぶしを透明なしにしたい:

  • fill="transparent"
<rect x="130" y="80" rx="10" ry="10" width="60" height="30" stroke="red" stroke-width="2" fill="transparent" />

塗りつぶしを半透明にしたい:

  • fillは塗りつぶしたい色を指定。
  • fill-opacity="0.5" など、小数点で透明度を指定。同様にstroke-opacityも設定できる。
  • 参考 :

SVG image 要素の注意点:

ブラウザ上でSVGを画像化したい:

JavaScriptライブラリ

Raphaelというのが老舗で、開発者が同じで Snap.svg というのが新たに作られたみたい。

比較記事:

2019年2月現在、確かに Snap.svg のプロジェクトは活発であるとは言えない。githubのTOPページで build failing が出たままで放置 + 最後のcommitが2017年というのが若干不安。
完成しているといえば完成しているのかもしれないが・・・。

仕事ではレガシーIEはもう使っていないこともあり、raphaelを使う必要性は今のところ感じられない。今後の仕事でも、レガシーIE(IE8-9)を相手にすることは無いだろう。

他のメジャーどころとしては、D3.jsなどはグラフやデータのビジュアライズに特化してる感じ。Two.js はWebGLやCanvasにも対応したシンプルな感じ。

raphael と Snap.svg の比較に疲れたら、SVG.js のほうが良いかもしれない。



プレーンテキスト形式でダウンロード
現在のバージョン : 1
更新者: msakamoto-sf
更新日: 2019-02-09 18:00:03
md5:821eeac53482f34fb8e75c462db8cd75
sha1:e3ed9772e1d211b113fc7ba1a549d8dcadd9ed6a
コメント
コメントを投稿するにはログインして下さい。