タグ

関連タグで絞り込む (1)

タグの絞り込みを解除

JavaScriptとSVGに関するn314のブックマーク (2)

  • グリグリ動くUIをVueとSVGでサクッと書く - No Regrets in Bathing

    これは Vue.js #3 Advent Calendar 2017 – Qiita 4日目の記事です。 こんにちは。SVGで色々なコンポーネントを作っているものです。最近の作品は下記のような感じです。 Webでグリグリ動くUIを作りたい!!という一心でやっています。 これらはほとんどSVGVueの組み合わせのみで作っています。依存が少ないというのは大事で、ライブラリ間の相性でハマったり、いろんなドキュメント間を往復することがなくなります。 Webでグリグリ動くUIを作るのは基的にめんどくさいです。jQuery pluginを駆使して作るのも闇が多いですし、divやcanvasをゴリゴリするのも結構手間がかかります。 ですが、最近はSVGで高度なUI実装されることが増えてきた気がします。特に自分が衝撃を受けたのは、CacooがFlashからSVGにスイッチしたことです。 nulab-i

    グリグリ動くUIをVueとSVGでサクッと書く - No Regrets in Bathing
  • JavaScriptで変な形のクリック領域を作るとき、svgが便利 - MANA-DOT

    昨日のVieraのリモコン、リモコンを作りたかったのもあるけど、svgJavaScriptを組み合わせた簡単なプログラムを試しに書いてみたかったというのがあります。 html5ではsvghtml中に埋め込んで、更にそのsvgcssでスタイルを当てたり、JavaScriptでいろいろやったり出来ます。 この時、要素のクリック領域は要素の形そのままなので、昨日のリモコンのような変な形のクリック領域を簡単に作ることが出来ます。 以下の画像の色のついた箇所にマウスを乗せたりクリックをしたりしてみてください。 100km 画像はWikipediaより。 上記の画像は、クリックできる箇所に .svg-area というクラス名と、data-name属性に市町村の文字列が入っており、以下の様なcss/jsによって動作を実現しています。 path.svg-area { cursor: pointer;

    JavaScriptで変な形のクリック領域を作るとき、svgが便利 - MANA-DOT
  • 1