我在我的项目中使用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。


当前回答

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

其他回答

这很容易做到:

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

function rebuildElementsOrder( selector, orderAttr, sortFnCallback ) { let $items = $(selector); let $cloned = $items.clone(); $cloned.sort(sortFnCallback != null ? sortFnCallback : function(a,b) { let i0 = a.getAttribute(orderAttr)?parseInt(a.getAttribute(orderAttr)):0, i1 = b.getAttribute(orderAttr)?parseInt(b.getAttribute(orderAttr)):0; return i0 > i1?1:-1; }); $items.each(function(i, e){ e.replaceWith($cloned[i]); }) } $('use[order]').click(function() { rebuildElementsOrder('use[order]', 'order'); /* you can use z-index property for inline css declaration ** getComputedStyle always return "auto" in both Internal and External CSS decl [tested in chrome] rebuildElementsOrder( 'use[order]', null, function(a, b) { let i0 = a.style.zIndex?parseInt(a.style.zIndex):0, i1 = b.style.zIndex?parseInt(b.style.zIndex):0; return i0 > i1?1:-1; }); */ }); use[order] { cursor: pointer; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="keybContainer" viewBox="0 0 150 150" xml:space="preserve"> <defs> <symbol id="sym-cr" preserveAspectRatio="xMidYMid meet" viewBox="0 0 60 60"> <circle cx="30" cy="30" r="30" /> <text x="30" y="30" text-anchor="middle" font-size="0.45em" fill="white"> <tspan dy="0.2em">Click to reorder</tspan> </text> </symbol> </defs> <use order="1" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sym-cr" x="0" y="0" width="60" height="60" style="fill: #ff9700; z-index: 1;"></use> <use order="4" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sym-cr" x="50" y="20" width="50" height="50" style="fill: #0D47A1; z-index: 4;"></use> <use order="5" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sym-cr" x="15" y="30" width="50" height="40" style="fill: #9E9E9E; z-index: 5;"></use> <use order="3" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sym-cr" x="25" y="30" width="80" height="80" style="fill: #D1E163; z-index: 3;"></use> <use order="2" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sym-cr" x="30" y="0" width="50" height="70" style="fill: #00BCD4; z-index: 2;"></use> <use order="0" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sym-cr" x="5" y="5" width="100" height="100" style="fill: #E91E63; z-index: 0;"></use> </svg>

使用D3:

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

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

而不是。append('g')

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

你可以利用利用。

<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

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();

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