Question

我有一个带有SVG的HTML页面。我知道想要以编程方式在SVG上方放置HTML元素（确切地说是输入元素）。

我有所需的元素位置，以SVG宽度和高度的百分比表示。

如何将元素置于该位置？

我的一个想法是，在SVG周围设置一个与我能做的完全相同的维度：

<div ...>
    <svg>...</svg>
    <input style="top:10%..."/>
    ...
</div>

但是为此，外部div必须与SVG具有完全相同的尺寸，我不知道该怎么做。 SVG只有一个viewBox，没有“width”和“height”属性。

Answer 1

将position: relative;设置为“包装器”，将position: absolute;设置为内部元素。此外，您需要设置包装器的大小（宽度和高度）以使% - 位置在内部工作。

.wrap {
   position: relative;
    width: 200px;
    height: 200px;
}

.svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    background-color: orange;
}

.wrap input {
    position: absolute;
    left: 20px;
}

<div class="wrap">
    <div class="svg"></div><!-- just cheating the svg with bg-color -->
    <input type="text" style="top: 10%;" >
</div>

确切地将html元素放在svg之上

1 个答案: