Изменить код изображения SVG на основе ориентации iPad с помощью JavaScript - PullRequest
Новая
       18

Изменить код изображения SVG на основе ориентации iPad с помощью JavaScript

2 голосов
/ 18 октября 2011

Мне нужен способ изменить ширину и высоту изображения внутри SVG, основываясь на ориентации устройства, используя Javascript (или ECMAScript внутри SVG).

Я использую этот код, но он не влияет на элемент изображения внутри SVG. 

// SVG code, inside XHTML file
<svg xmlns="http://www.w3.org/2000/svg" class="birds" height="569px" id="bird01" version="1.1" width="368px" x="0px" xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" y="0px">
  <g>
    <defs>
      <rect class="crop" height="569" id="SVGID_1_" width="368"></rect>
    </defs>
    <use overflow="visible" xlink:href="#SVGID_1_"></use>
    <g clip-path="url(#SVGID_2_)">
      <image clip-path="url(#SVGID_2_)" height="846" id="bird-img" overflow="visible" width="547" xlink:href="../Images/bird.jpeg"></image>
    </g>
  </g>
</svg>

// JS code, outside file, referenced in head

window.onload = function initialLoad() {
     detectOrientation();
}

detectOrientation();
    window.onorientationchange = detectOrientation;
    function detectOrientation(){
        if(typeof window.onorientationchange != 'undefined'){
            if ( orientation == 0 ) {
                 document.getElementById("bird-img").setAttribute("width", "547").setAttribute("height", "846");
            }
            else if ( orientation == 90 ) {
                 document.getElementById("bird-img").setAttribute("width", "368").setAttribute("height", "568");
            }
            else if ( orientation == -90 ) {
                 document.getElementById("bird-img").setAttribute("width", "368").setAttribute("height", "568");
            }
            else if ( orientation == 180 ) {
                 document.getElementById("bird-img").setAttribute("width", "547").setAttribute("height", "846");
            }
        }
    }

По этой ссылке отображается тестовая страница: http://bit.ly/mSBDhq Настройка размера окначтобы увидеть окно SVG, меняющее его размер.Я просто хочу, чтобы размер изображения был отрегулирован по ширине поля SVG в обоих случаях (альбомная и книжная).Я использую медиазапросы CSS, чтобы выполнять большую часть работы, но CSS-элемент не влияет на элемент изображения SVG, поэтому я ищу решение JS.Я ценю любые источники света.

Примечание: к сожалению, в этом случае я просто не могу использовать обычный тег изображения и переполнение свойств CSS в сочетании с медиа-запросами для достижения этого эффекта (длинная история).

1 Ответ

0 голосов
/ 18 октября 2011

Обратите внимание, что setAttribute() не возвращает получателя.Действительно, у него нет возвращаемого значения , согласно спецификации.Это не jQuery.

Давайте немного высушим вашу функцию и исправим ее одновременно: 

function detectOrientation(){
  if(typeof window.onorientationchange == 'undefined') return;
  var img = document.getElementById('bird-img');
  switch(orientation){
    case 0:
    case 180:
      img.setAttribute('width',547);
      img.setAttribute('height',846);
    break;
    case 90:
    case -90:
      img.setAttribute('width',368);
      img.setAttribute('height',568);
    break;
  }
}

Edit : Доказательство этого при запуске кодавлияет на изображение (по крайней мере, в Chrome):

http://phrogz.net/tmp/ResizedBird.png

...