如何在svg元素中使用z索引?

我在我的项目中使用svg圆圈，像这样，

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 120">
    <g>
        <g id="one">
            <circle fill="green" cx="100" cy="105" r="20" />
        </g>
        <g id="two">
            <circle fill="orange" cx="100" cy="95" r="20" />
        </g>
    </g>
</svg>

我在g标签中使用z索引来显示第一个元素。在我的项目中，我只需要使用z-index值，但我不能使用我的svg元素的z-index。我在谷歌上搜了很多，但没有找到相关的东西。所以请帮助我在我的svg中使用z-index。

这里是DEMO。

试着颠倒# 1和# 2。看看这个小提琴:http://jsfiddle.net/hu2pk/3/

更新

在SVG中，z-index由元素在文档中出现的顺序定义。如果你愿意，你也可以看看这个页面:https://stackoverflow.com/a/482147/1932751

2013-07-22 11:44:28

规范

在SVG规范1.1版本中，呈现顺序是基于文档顺序的:

first element -> "painted" first

参考SVG 1.1。规范

3.3渲染顺序 SVG文档片段中的元素有一个隐式的绘制顺序，SVG文档片段中的第一个元素首先“绘制”。后续的元素被绘制在先前绘制的元素之上。

解决方案(cleaner-faster)

你应该把绿色的圆圈作为最近要绘制的对象。交换这两个元素。

这里是jsFiddle的fork。

解决方案(选择)

该标记与属性xlink:href(对于SVG 2只是href)一起使用，并将元素的id作为值。请记住，这可能不是最好的解决方案，即使结果看起来很好。有一点时间，这里是规范SVG 1.1“use”元素的链接。

目的: 避免要求作者修改所引用的文档以向根元素添加ID。

关于SVG 2的说明

SVG 2规范是下一个主要版本，仍然支持上述特性。

3.4. Rendering order Elements in SVG are positioned in three dimensions. In addition to their position on the x and y axis of the SVG viewport, SVG elements are also positioned on the z axis. The position on the z-axis defines the order that they are painted. Along the z axis, elements are grouped into stacking contexts. 3.4.1. Establishing a stacking context in SVG ... Stacking contexts are conceptual tools used to describe the order in which elements must be painted one on top of the other when the document is rendered, ...

SVG 2支持Mozilla -绘画我如何知道我的浏览器是否支持svg 2.0 我可以使用SVG吗? 对于SVG 2，使用href代替额外的已弃用名称空间XLink:href(感谢G07cha)

2014-08-14 07:23:10

你可以利用利用。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 120">
    <g>
        <g id="one">
            <circle fill="green" cx="100" cy="105" r="20" />
        </g>
        <g id="two">
            <circle fill="orange" cx="100" cy="95" r="20" />
        </g>
    </g>
    <use xlink:href="#one" />
</svg>

绿色圆圈出现在顶部。 jsFiddle

2014-10-09 11:36:36

另一种解决方案是使用div，它使用zIndex来包含SVG元素。在这里: https://stackoverflow.com/a/28904640/4552494

2015-03-06 18:15:41

正如其他人所说，z-index是由元素在DOM中出现的顺序定义的。如果手动重新排序你的html不是一个选项或将是困难的，你可以使用D3重新排序SVG组/对象。

使用D3更新DOM顺序和模仿Z-Index功能

使用D3更新SVG元素Z-Index

在最基本的级别上(如果您没有将id用于其他任何事情)，您可以使用元素id作为z-index的替代品，并使用它们进行重新排序。除此之外，你几乎可以让你的想象力自由发挥。

代码片段中的示例

基本思想是:

Use D3 to select the SVG DOM elements. var circles = d3.selectAll('circle') Create some array of z-indices with a 1:1 relationship with your SVG elements (that you want to reorder). Z-index arrays used in the examples below are IDs, x & y position, radii, etc.... var zOrders = { IDs: circles[0].map(function(cv){ return cv.id; }), xPos: circles[0].map(function(cv){ return cv.cx.baseVal.value; }), yPos: circles[0].map(function(cv){ return cv.cy.baseVal.value; }), radii: circles[0].map(function(cv){ return cv.r.baseVal.value; }), customOrder: [3, 4, 1, 2, 5] } Then, use D3 to bind your z-indices to that selection. circles.data(zOrders[setOrderBy]); Lastly, call D3.sort to reorder the elements in the DOM based on the data. circles.sort(setOrder);

例子

可以按ID进行堆叠

最左边的SVG在上面

上面的半径最小

或者指定一个数组来为特定的顺序应用z-index——在我的示例代码中，数组[3,4,1,2,5]移动/重新排序第3个圆(在原始HTML顺序中)，使其在DOM中处于第1位，第4位为第2位，第1位为第3位，以此类推……

2016-04-20 07:01:29

使用D3:

如果你想以相反的顺序将元素添加到数据中，使用:

.insert(“g”、”:第一个孩子”)

而不是。append('g')

将一个元素添加到组元素的顶部

2016-04-22 11:29:19

svg没有z指数。但是svg根据元素在DOM中的位置来确定它们的最上面。因此，您可以删除Object并将其放置到svg的末尾，使其成为“最后渲染”元素。然后将其呈现为视觉上的“最顶层”。

使用jQuery:

function moveUp(thisObject){
    thisObject.appendTo(thisObject.parents('svg>g'));
}

用法:

moveUp($('#myTopElement'));

使用D3.js:

d3.selection.prototype.moveUp = function() {
    return this.each(function() {
        this.parentNode.appendChild(this);
    });
};

用法:

myTopElement.moveUp();

2016-10-24 22:22:45

使用D3:

如果希望按顺序重新插入每个选定元素，将其作为其父元素的最后一个子元素。

selection.raise()

2017-11-14 12:47:45

如前所述，svg按顺序呈现，(目前)不考虑z-index。也许只是把特定的元素发送到它的父元素的底部，这样它就会最后呈现。

function bringToTop(targetElement){
  // put the element at the bottom of its parent
  let parent = targetElement.parentNode;
  parent.appendChild(targetElement);
}

// then just pass through the element you wish to bring to the top
bringToTop(document.getElementById("one"));

为我工作。

更新

如果您有一个嵌套的SVG，其中包含组，则需要将项目从其parentNode中取出。

function bringToTopofSVG(targetElement){
  let parent = targetElement.ownerSVGElement;
  parent.appendChild(targetElement);
}

SVG的一个很好的特性是每个元素都包含它的位置，而不管它嵌套在哪个组中:+1:

2017-11-15 03:25:18

干净，快速，简单的解决方案张贴在这个答案的日期是不令人满意的。它们是基于SVG文档缺乏z顺序这一错误语句构建的。库也不是必需的。一行代码就可以执行大多数操作来操纵对象的z顺序或对象组，这可能是开发在x-y-z空间中移动2D对象的应用程序所需要的。

SVG文档片段中绝对存在Z顺序

所谓的SVG文档片段是派生自基本节点类型SVGElement的元素树。SVG文档片段的根节点是SVGSVGElement，它对应于HTML5 < SVG >标记。SVGGElement对应于<g>标记，并允许聚合子元素。

像在CSS中那样在SVGElement上使用z-index属性将会破坏SVG呈现模型。W3C SVG推荐v1.1第二版的3.3和3.4节指出，SVG文档片段(SVGSVGElement的子代树)是使用所谓的深度优先搜索树来呈现的。这个方案在任何意义上都是z阶的。

Z顺序实际上是一种计算机视觉的快捷方式，以避免对光线追踪的复杂性和计算需求的真正3D渲染的需求。SVG文档片段中元素的隐式z索引的线性方程。

z-index = z-index_of_svg_tag + depth_first_tree_index / tree_node_qty

这很重要，因为如果你想把一个在正方形下面的圆移动到它上面，你只需要把正方形插入到圆前面。这可以在JavaScript中轻松完成。

支持方法

SVGElement实例有两个方法支持简单的z顺序操作。

parent.removeChild(孩子) 的父母。方法(孩子,childRef)

不会造成混乱的正确答案

因为SVGGElement (<g>标记)可以像SVGCircleElement或任何其他形状一样轻松地删除和插入，所以可以使用SVGGElement轻松实现Adobe产品和其他图形工具的典型图像层。这个JavaScript实际上是一个Move Below命令。

parent.insertBefore(parent.removeChild(gRobot), gDoorway)

如果作为SVGGElement gRobot的子元素绘制的机器人层在作为SVGGElement g门口的子元素绘制的门口层之前，那么机器人现在在门口的后面，因为门口的z阶现在是1加上机器人的z阶。

“移动到上方”命令几乎同样简单。

parent.insertBefore(parent.removeChild(gRobot), gDoorway.nextSibling())

只要考虑a=a和b=b就能记住。

insert after = move above
insert before = move below

使DOM处于与视图一致的状态

这个答案是正确的，因为它是最小和完整的，并且像Adobe产品或其他设计良好的图形编辑器的内部一样，使内部表示处于与呈现所创建的视图一致的状态。

替代但有限的方法

另一种常用的方法是将CSS z-index与多个SVG文档片段(SVG标签)结合使用，除了底部的部分，其余部分的背景都是透明的。这再次破坏了SVG呈现模型的优雅性，使得在z顺序上向上或向下移动对象变得困难。

注:

(https://www.w3.org/TR/SVG/render.html v 1.1, 2nd Edition, 16 August 2011) 3.3 Rendering Order Elements in an SVG document fragment have an implicit drawing order, with the first elements in the SVG document fragment getting "painted" first. Subsequent elements are painted on top of previously painted elements. 3.4 How groups are rendered Grouping elements such as the ‘g’ element (see container elements) have the effect of producing a temporary separate canvas initialized to transparent black onto which child elements are painted. Upon the completion of the group, any filter effects specified for the group are applied to create a modified temporary canvas. The modified temporary canvas is composited into the background, taking into account any group-level masking and opacity settings on the group.

2018-06-12 12:52:30

将SVG元素推到最后，这样它的z索引就会在上面。在SVG中，没有称为z-index的属性。尝试下面的javascript把元素放在顶部。

var Target = document.getElementById(event.currentTarget.id);
var svg = document.getElementById("SVGEditor");
svg.insertBefore(Target, svg.lastChild.nextSibling);

目标:是一个我们需要把它放在顶部的元素是元素的容器

2018-07-29 09:12:52

我们已经到了2019年，SVG仍然不支持z-index。

您可以在Mozilla的SVG2支持站点上看到z-index的状态-未实现。

你也可以在网站Bug 360148“支持SVG元素上的'z-index'属性”(报告:12年前)上看到。

但在SVG中有3种设置方法:

与element.appendChild(孩子); parentNode。方法(newNode referenceNode); targetElement。insertAdjacentElement (positionStr newElement);(IE不支持SVG)

交互式演示示例

这三个函数。

2019-01-28 18:27:12

这很容易做到:

克隆你的物品对克隆项进行排序替换克隆项

2019-04-05 00:54:11

通过transform:TranslateZ移动到前面

警告:仅适用于FireFox

2020-10-08 01:29:12

一个更好的例子，我已经用过了。

<svg>
  <defs>
    <circle id="one" fill="green" cx="40" cy="40" r="20" /> 
    <circle id="two" fill="orange" cx="50" cy="40" r="20"/> 
  </defs>
  <use href="#two" />
  <use href="#one" />
</svg>

为了控制顺序，你可以改变这些use元素的href属性值。这对动画制作很有用。

多亏了defs，圆圈元素只绘制一次。

jsfiddle.net/7msv2w5d

2021-11-01 07:17:48

这是关于z-index和svg搜索的顶级谷歌结果。看完所有的答案后，有些答案很好，但我还是很困惑。

因此，对于像我这样的新手来说，这是目前的总结，9年后的2022年。

svg不能用z指数。

在svg中，z-index由元素在文档中出现的顺序定义。

如果你想要一些东西出现在顶部，或更接近用户，最后绘制或插入它之前。源

SVG 2可以支持z-index，但可能永远不会出现

SVG 2是一个实现这些功能和其他功能的提议，但它面临着永远无法向前发展的风险。

SVG 2于2016年进入候选推荐阶段，并于2018年进行了修订，最新草案于2021年6月8日发布。源

然而，它并没有得到很多的支持，很少有人在做这件事。所以不要屏住呼吸等这个消息。

你可以使用D3，但可能不应该

通常用于可视化数据的D3通过绑定你的z-index，然后排序来支持z-index，但它是一个大而复杂的库，如果你只是想让某个SVG出现在堆栈顶部，它可能不是最好的选择。

2022-01-24 21:13:38

只是想添加一个技巧，当你想把一个特定的元素放在上面。

function moveInFront(element) {
    const svg = element.closest('svg'); // Find the parent SVG
    svg.appendChild(element); // Append child moves the element to the end
}

这是因为(引用文档)“appendChild()将[元素]从当前位置移动到新位置”，而不是添加一个副本。

注意:如果元素是嵌套的，则必须在组内将元素移动到前面，也许还必须将组移动到前面。

2022-11-18 21:20:48

Use可以达到这个目的，但是那些被放置在Use help之后的元素很难操作…… 在我使用它之后，我不明白的是:为什么我不能在use元素上悬停(无论是鼠标悬停，鼠标进入操作都不能工作)来获得额外的功能-比如~在圆圈上显示文本~ 之后返回到圆圈重新排序，因为这是操作svg对象的唯一方式

2023-01-16 15:53:08

如何在svg元素中使用z索引?

推荐文章

最新文章

标签