Question

我想让一些svg元素在顶部。像Z-Index这样的东西。我知道svg z-index是由它们的绘制顺序设置的。我可以删除svg elem并重新绘制它来更改顺序。所以我正在“艰难地”这样做。使用vanilla JS / JQuery有更好的方法吗？

Answer 1

您不需要删除该元素并重新创建它。你可以移动它。

首先，获取指向它的指针及其父SVG：

var mysvg = document.getElementById("mysvg");
var myelement = document.getElementById("myelement");

然后使用insertBefore()将其插入到最后。如果你＆＃34;插入＆＃34;一个已经是DOM的一部分的节点，它会被移动。

mysvg.insertBefore(myelement, null);

在此处使用null表示将其作为最后一个孩子插入。

<强>演示

＆＃13;

function moveIt()
{
  var mysvg = document.getElementById("mysvg");
  var myelement = document.getElementById("myelement");

  mysvg.insertBefore(myelement, null);
}

＆＃13;

<svg id="mysvg">
  <circle cx="100" cy="75" r="75" fill="green" id="myelement"/>
  <circle cx="200" cy="75" r="75" fill="red"/>
</svg>

<button onclick="moveIt()">Move it</button>

＆＃13;

<强>更新

moveIt（）函数的jQuery等价物是：

function moveIt()
{
  var mysvg = $("#mysvg");
  var myelement = $("#myelement");

  mysvg.append(myelement);
}

使svg元素在顶部

1 个答案: