Edited at

SVG要素の重なり順を動的に変える

SVG要素にz-indexが使えないことで一瞬戸惑ってしまいますが、要素の並び順=重なり順であるので、要素を並び替えればいい。

ということでそれが実現できるSVG-Z-ORDERを利用します。


利用パッケージ

SVG-Z-ORDER

https://takamin.github.io/svg-z-order/

https://takamints.hatenablog.jp/entry/npm-svg-z-order-js


機能


  • SVGZElement.toTop() - 指定した要素の並び順を一番先頭に持ってくる(一番手前に表示される)

  • SVGZElement.toBottom() - 指定した要素の並び順を一番末尾へ変更する(一番後ろに表示される)

  • SVGZElement.moveUp(element/n) - 指定されたターゲット要素の前またはn回、要素を手前へ移動する

  • SVGZElement.moveDown(element/n) - 指定されたターゲット要素の後またはn回、要素を奥へ移動する

  • SVGZElement.moveTo(element/index) - Moves the element to the specified position.ターゲット要素を指定された場所へ移動する


コード例


require使う場合

var svgz = require("svg-z-order");

var g = svg.getElementById("foo");
svgz.element(g).toTop();


require使えない/使わない場合

読み込みます。

<script type="text/javascript" src="svg-z-order.js"></script>

D3.jsとあわせて利用し、マウスオーバーした要素の重なり順を一番手前にするには、たとえばこんな感じで。

.on("mouseover", function() {

var d3g = d3.select(this);
svgz_element(d3g.node()).toTop();
})