Как исправить DIV в положении на фоне SVG? - PullRequest
Новая
       13

Как исправить DIV в положении на фоне SVG?

1 голос
/ 22 ноября 2010

У меня очень простая веб-страница, которую я пытаюсь создать.Он имеет тег img, включающий файл изображения SVG, который масштабируется до 100% ширины страницы.У меня также есть коллекция DIV, которые я хотел бы «исправить» на месте по отношению к изображению.

Я начал с абсолютного позиционирования с использованием ems, но быстро понял, что мне придется перейти на проценты, еслиЯ хотел, чтобы элементы 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>

1 Ответ

1 голос
/ 22 ноября 2010

устанавливает одинаковую верхнюю и левую позиции для .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/

...