Сделать svg мгновенное изображение на div

Вот код SVG составляет 1279 х 859.

Как заставить изображение выровнять его левый верхний угол по правому краю, теперь оно выравнивается по левому верхнему углу вкладки / окна браузера.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
    <style type="text/css">
        svg { position:fixed; top:0; left:0; height:100%; width:100%;
    }
    </style>

    <script src="/script/jquery-1.10.2.min.js" type="text/javascript"></script>



    <script src="/script/snap.svg.js" type="text/javascript"></script>
    <script src="/script/snap.svg.zpd.js" type="text/javascript"></script>

    <div id="jqxPanel" style="padding: 20px; border:1px solid black; width: 1920px; height: 1080px">
        <div id="image" style="padding: 2px; border: 1px solid black"; width: 1290px; height: 870px">
            <svg id="SnapCanvas" ></svg>
        </div>
    </div>

    <script type="text/javascript">
        var BaseSVG = Snap('#SnapCanvas');
        $(document).ready(function () {

            SVGElement.prototype.getTransformToElement = SVGElement.prototype.getTransformToElement || function (elem) {
                return elem.getScreenCTM().inverse().multiply(this.getScreenCTM());
            }

            Snap.load("Canvas.svg", function (f) {
                BaseSVG.append(f);
            });

        });
    </script>   
</body>
</html>
Источник

1 ответ

Решение

А) Вам не хватает слов из ваших вопросов. Я предполагаю, что вы хотите сказать: "Как заставить изображение выровнять его левый верхний угол к верхнему левому углу его контейнера"

Если так,

Б) Ваше изображение имеет:

position: fixed;

Фиксированное позиционирование означает, что элемент будет измерять свои верхнее, нижнее, левое и правое значения от края области просмотра (то есть окна). То, что вы хотите, это:

position: absolute;

Позиционирование чего-либо абсолютно означает, что его верхнее, нижнее, левое и правое значения будут измеряться по краям его последнего расположенного предка. Эта часть важна. Ни один из его предков не является positioned по умолчанию. Все элементы имеют position: static по умолчанию. staticявляется единственным значением свойства position, которое не учитываетсяpositioned, Итак, вам нужно изменить свойство position родителя svg. Я бы изменил это на relative потому что это наименее вероятно испортить ваши стили.

В конце дня ваши стили должны выглядеть так:

 svg { 
   position:absolute; 
   top:0; 
   left:0; 
   height:100%; 
   width:100%;
 }

 #image {
   position: relative;
 }

Отредактировано для опечаток.

Источник
Другие вопросы по тегам