如何使SVG图像位于其他元素之上

时间:2018-07-18 12:48:12

标签: css svg z-index

我正在从具有地板和透明背景墙的png图像的地板视图中选择平面选择器,我想<image />位于我的<a></a>上方,所以当我更改内部多边形的颜色时,墙壁将为黑色-不会混合黑色和参考,例如rgba(255,255,0.3)在黑色背景五点rgb(139, 101, 101);

TLDR:如何使svg图像位于其他元素之上?

<svg class="floor_svg" version="1.1" preserveAspectRatio="xMinYMin" viewBox="0 0 1080 800" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <image class="area__bck" stroke-width="0" xlink:href="<?=get_template_directory_uri()?>/hood/floor_template/b1-p1.png" preserveAspectRatio="xMinYMin" width="1080" height="800" y="0" x="0"></image>
    <a xlink:href="#" data-floor_flat_nr="1">
        <polygon points="388,84.5 388,64.3 253.2,64.3 253.2,84.5 88.3,84.5 88.3,393.1 516.8,393.1 516.8,84.5 "/>
        <polygon class="terrace" points="57.8,10.3 71,10.3 235.3,10.3 235.3,67.8 71,67.8 71,164.7 51.1,164.7 51.1,311
            13.1,311 13.1,164.7 13.1,162.7 13.1,10.3 "/>
    </a>
    <a xlink:href="#" data-floor_flat_nr="2">
        <polygon points="456.8,773.8 219.9,773.8 219.7,615 147.8,615.5 147.8,404.3 517.5,404.3 517.5,479.2
    456.8,478.9 "/>
        <polygon class="logy" points="159,630.7 149.1,630.7 135.2,630.7 135.2,771.8 149.1,771.8 149.1,785.8 203.3,785.8
    203.3,630.7 "/>
    </a>
    <a xlink:href="#" data-floor_flat_nr="3">
        <polygon points="584.6,476 527.1,476.2 526.9,488.2 467.4,488.2 467.4,773.8 612.4,773.8 612.4,703.4
    689.5,703.5 689.6,692.9 695.5,692.9 695.7,558 584.5,558 "/>
        <rect x="618.5" y="703.5" class="logy" width="71.1" height="84.4"/>

    </a>
</svg>

1 个答案:

答案 0 :(得分:0)

Paulie_D答案:

将图像最后放置?我认为这是堆叠顺序!

是的