Растянуть <svg>внутри <embed>по размеру окна - PullRequest
Новая
       27

Растянуть <svg>внутри <embed>по размеру окна

6 голосов
/ 27 мая 2011

Я пытаюсь растянуть документ SVG внутри DOM, чтобы соответствовать размеру окна.

вроде так: 

<div id="y">
    <div id="button"> click to zoom</div>
    <embed id="x" src="s17.svg" >
    <script>
        var btn= document.getElementById("button");
        btn.addEventListener('click',function(){
        var z= document.getElementsByTagName("embed")[0];
        var y = z.getSVGDocument();
        y.lastChild.setAttribute("viewBox","0 0 "+window.innerWidth+" "+window.innerHeight);
                                               },false);

    </script>
</div>

CSS: 

#x{
    height:100%;
    width:100%;
    overflow:hidden;
}
#y{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    overflow:hidden;
}

Это не работает ... Что я делаю не так?

Ответы [ 2 ]

9 голосов
/ 27 мая 2011

Все браузеры должны быть в состоянии справиться с этим просто отлично:

  • добавить viewBox к элементу svg (s17.svg в вашем примере) без использования скрипта, если это возможно
  • удалить атрибуты width и height в элементе svg, если они указаны
  • добавить атрибут preserveAspectRatio="none" к элементу svg, чтобы он растягивался, даже если соотношение сторон css-viewport не соответствует соотношению сторон viewBox.
  • установите ширину / высоту встраиваемого / iframe / объекта на то, что вы хотите, и svg автоматически растянется, чтобы соответствовать

Если вы не хотите растягивать, вы также можете сделать preserveAspectRatio="xMidYMid slice" (заполнить весь видовой экран, вырезая части при необходимости) или preserveAspectRatio="xMidYMid meet" (это значение по умолчанию, центрируйте svg в видовом окне и сохраняйте соотношение сторон) ).

0 голосов
/ 27 мая 2011

Все браузеры поддерживают SVG по-разному. Я думаю, что вам лучше всего использовать тег object вместо embed, и вам все равно придется взломать его, чтобы он выглядел правильно в каждом браузере. Эта ссылка и эта ссылка содержат некоторую полезную информацию для того, чтобы заставить ее работать в кросс-браузерном режиме.

...