자바 스크립트를 사용하여 iPad 방향을 기반으로 SVG 이미지 코드를 변경하십시오.

Question

자바 스크립트 (또는 ECGAScript, SVG 내부)를 사용하여 장치의 방향에 따라 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 미디어 쿼리를 사용하고 있지만 SVG 이미지 요소가 CSS의 영향을받지 않기 때문에 JS 솔루션을 찾고 있습니다. 이것에 대해 어떤 조명이라도 고맙습니다.

사이드 노트 : 불행하게도,이 경우에는 일반 이미지 태그와 CSS 속성 오버플로를 미디어 쿼리와 결합하여 사용할 수 없습니다 (긴 기사).

Answer 1

setAttribute()은 수신자를 반송하지 않습니다. 실제로 그것은 has no return value, 당 사양. 이것은 jQuery가 아닙니다.

하자 DRY까지 함수 조금 동시에 그것을 해결 :

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; 
    } 
} 

편집 : 코드가 실행될 때 (적어도 크롬) 이미지에 영향을 미치는 것을 증명 :

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