자바 스크립트를 통해 svg 폴리곤 속성을 변경하십시오.

Question

브라우저 창 크기에 따라 svg 폴리곤 요소를 크기 조절하고 변환하려고합니다. 크기를 조정하고 변환하려는 정도를 계산하는 것은 문제가 아니지만 다각형을 변경하는 것은 나를위한 것입니다. 내가 다각형의 수를 계산하도록 내가 아래로 문제를 부러

난 당신이 도움이 될 수 있습니다 바라고

는 ... (이 괜찮습니다) :

function countnumberofPolygons() { 
    numberofPolygons = document.getElementsByTagName("polygon").length; 
    return numberofPolygons; 
} 

과를 생성하는 기능 변환 = "결정하기위한 문자열"다각형의 속성을 - 변환 특성을 말할 수있다 - 변환 = "번역 (800,00) 규모 (1.2)"

function createsvgtransformattribute(){ 
    transformattribute = '"translate('+ translateAmount +',0) scale(' + scaleAmount + ')"'; 
} 

하지만 그들과 설정을 통해 반복 그들의 속성이 작동하지 않는 것 같습니다. 나는 그것을 모두 아래로 깨진 다시 최대를 구축했습니다 -하지만 이것으로 끝 -

function changeattributes(numberofPolygons, transformattribute){ 
    for (var q=0;q< numberofPolygons;q++){ 
     document.getElementsByTagname("polygon")[q].setAttribute("transform", transformattribute); 
    } 
} 

하지만 .... 아마 몇 가지 간단한 방법으로, 잘못되는 수동으로 문자열 TransformAttribute의 값을 삽입하는 경우에도 , 작동하지 않습니다. 제발 도와 줄 수있어?

Answer 1

이다. 스크립트에는 몇 가지 이상한 점이 있습니다 (예 : 왼쪽 사이드 찌르기).하지만 다른 사람들에게도 도움이되기를 바랍니다.

나는 이미지 태그의 이미지를 배경 이미지로 이미지가있는 div로 변환했습니다. 그런 다음 이미지 맵을 svg로 가져옵니다. 그런 다음이 스크립트는 svg의 변형 속성을 사용하여 이미지 맵의 다각형을 확장 및 변환합니다. 여기

var winWidth; 
var winHeight; 

var MainImageHeight; 
var MainImageWidth; 

var HeightRatio;     
var imageWidth; 

var leftoffset; 
var ImgVsOriginal; 

var offsetnudge; 
var offsetnudgescaled; 
var los; 
var translateAmount; 
var scaleAmount; 

var numberofNodes; 
var numberofPolygons; 
var polygonArray; 
var transformattribute; 


function setVariables(){ 

           //Browser window widths and heights 
       winWidth = window.innerWidth; 
       winHeight = window.innerHeight; 

               //Widths and heights of the element with the MainImage id 
       MainImageHeight = document.getElementById('MainImage').offsetHeight; 
       MainImageWidth = document.getElementById('MainImage').offsetWidth; 

               //Establishes the ratio between the height of the element and the background image it displays, 
               //which has a height of 920px 
               //The MainImage resizes the background image so the ratio is needed to scale the svg/imagemap 
       HeightRatio = MainImageHeight/920; 

               //This establishes the width of the background image as presented - the background image file is 1400px 
       imageWidth = HeightRatio*1400; 

               //The Background image is centered and covers the screen. So there is space either side of the background image 
               //This space is worked out here, and halved to work out the left-hand side portion of the space 
       leftoffset = (winWidth-imageWidth)/2; 

               //The original imagemap was created based on an image displayed as 960px by 653px. This calculates the ratio between them. 
       ImgVsOriginal = MainImageHeight/653; 

               //The original image was based on images with a small border each side. This is a hard-adjustment for this. 
       offsetnudge = 30; 

               //Scales the offset for this border based on the background image size vs the original 
       offsetnudgescaled = offsetnudge*ImgVsOriginal; 

               //Creates an easy to type variable based on 
       //los = leftoffset + offsetnudgescaled; 
       translateAmount = leftoffset + offsetnudge; 
       scaleAmount = ImgVsOriginal; 
               //Creates variable for idname 
       var idname;  
       } 






function createsvgtransformattribute(){ 
       transformattribute = 'translate('+ translateAmount +',0) scale(' + scaleAmount + ')'; 
       return transformattribute; 
} 


function countchildNodes(){ 
       numberofNodes = document.getElementById("svgstuff").childNodes.length; 

       } 

function printnumberofnodes(){ 
       document.write('<span>Number of Nodes:' + numberofNodes + '</span>'); 
} 

function countnumberofPolygons(){ 
       numberofPolygons = document.getElementsByTagName("polygon").length; 
       return numberofPolygons; 
       } 

function getpolygonArray(){ 
       polygonArray = document.getElementsByTagName("polygon"); 
} 

function printnumberofPolygons(){ 
       document.write('<span>Number of Polygons:' + numberofPolygons + '</span>'); 
} 







function changeattributes(){ 
       document.getElementById('test1').innerHTML='changed'; 
     for(q=0; q<polygonArray.length; q++){ 
     //document.getElementsByTagName('polygon')[q].setAttribute("class", "blue"); 
     document.getElementsByTagName('polygon')[q].setAttribute("transform", transformattribute); 
     } 
} 




function svgscale(){ 
       setVariables(); 
       getpolygonArray(); 
       createsvgtransformattribute(translateAmount, scaleAmount); 
       changeattributes(); 
     } 

당신을 위해 몇 가지 예를 다각형 있습니다

<div id="MainImage"> 
    <svg onresize="svgscale()" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
    style="position:absolute;" 
    width="2000" height="2000" 
    pointer-events="visible">  
     <a xlink:href="1.htm" xlink:title="1">'); 
      <polygon id="p1" class="" points="736,378 680,363 680,233 736,209 736,378" transform="" fill="" > 
      </polygon> 
     </a> 
     <a xlink:href="2.htm" xlink:title="2"> 
      <polygon id="p2"class="area" points="839,161,742,204,739,513,831,587,839,161" transform="" fill=""> 

      </polygon> 
     </a> 
     <a xlink:href="3.htm" xlink:title="3">'); 
      <polygon id="p3" class="area" points="521,286,521,296,557,297,555,287,521,286" transform="" fill="" > 

      </polygon> 
     </a> 
     <a xlink:href="4.htm" xlink:title="4">'); 
      <polygon id="p4" class="area" points="562,218,562,240,657,242,657,219,562,218" transform="" fill="" > 

      </polygon> 
     </a> 
     <a xlink:href="5.htm" xlink:title="5">'); 
      <polygon id="p5" class="area" points="952,273,909,275,905,276,902,347,858,344,846,351,845,356,855,361,845,542,849,546,849,572,846,573,845,575,841,652,954,652,952,273" transform="" fill="" > 
      </polygon> 
     </a>      

    </svg> 

</div> 

이 내가 태그 이름으로하지주기를 통해 수 경우 다각형의 일부 ID를 넣어하지만 태그 이름하여 다각형을 획득하여 작동 및 for 루프를 통해 순환합니다. :-) #MainImage div의 CSS는 기본적으로 다음과 같습니다.

#MainImage {background-image: url('pix/file.jpg'); background-size: auto 100%;} 

Answer 2

setAttribute를 사용하여 변환 속성을 설정할 때 큰 따옴표로 묶지 마십시오. 그래서 당신이 필요 내가 문서가 JQuery와 함수를 읽고) (svgscale를 호출하여 onResize 사용되는 HTML에서

transformattribute = 'translate('+ translateAmount +',0) scale(' + scaleAmount + ')';