如何将 DIV 固定在 SVG 背景上？答案

【问题标题】：How to fix a DIV in position against an SVG Background?如何将 DIV 固定在 SVG 背景上？
【发布时间】：2011-05-13 14:35:33
【问题描述】：

我正在尝试构建一个非常简单的网页。它有一个 img 标签，其中包含一个缩放到页面宽度 100% 的 SVG 图像文件。我还有一组 DIV，我想相对于图像“修复”它们。

我从使用 em 的绝对定位开始，但很快意识到如果我想让 div 相对于缩放背景保持在原位，我必须移动到百分比。

但后来我意识到问题在于，由于我的 SVG 会因页面宽度的变化而缩放，所以我无法设置一个好的高度百分比，因为当窗口的宽度因SVG 的纵横比。

对方法有什么建议吗？我觉得我在这里缺少一些基本的东西。

这是我的页面示例：

<html>
<head>
<style>
    .box{
        width: 4.0em;
        height:3.0em;
        background-color: yellow;
        position: absolute;
    }
    #a{ left:6.4%; top:16.0%; }
    #b{ left:6.4%; top:23.0%; }
    /* This doesn't work. The DIVs aren't fixed relative to bg.svg. */
</style>
<body>
    <img src="bg.svg" width="100%" />
    <div class="box" id="a"></div>
    <div class="box" id="b"></div>
</body>

【问题讨论】：

标签： html css layout svg

【解决方案1】：

为 .box 和 img 设置相同的顶部和左侧位置，这样 div 和图像都具有相同的“锚点”，您可以相对于该锚点定位 div。

img {
   position: absolute;
    top: 0px;
    left: 0px;
}
.box{
    width: 4.0em;
    height:3.0em;
    background-color: yellow;
    position: absolute;
    top: 0;
    left: 0;
}
#a{ left:20px; top:20px; }
#b{ left:20px; top:20px; }

在这里查看：http://jsfiddle.net/SebastianPataneMasuelli/hP6Dg/1/

【讨论】：

这似乎不行。在调整窗口大小时，SVG 的缩放比例仍与框不同。