通過Javascript更改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

在html中我使用文檔讀取Jquery函數和onresize來調用svgscale（）。 腳本中有一些古怪的東西 - 就像左側的微調 - 但希望它能爲其他人工作。

我已將圖像標記中的圖像轉換爲具有圖像作爲背景圖像的div。圖像映射然後被拖入svg。然後，此腳本使用svg的transform屬性來相應地縮放和平移圖像映射的多邊形。

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> 

我把一些IDS在多邊形的情況下，我不能循環通過記名，但它的工作原理是通過標記名獲得多邊形通過for循環循環。 :-) #MainImage div的CSS基本上是：

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

Answer 2

當您使用setAttribute設置transform屬性時，不要將它放在雙引號中。所以你需要的是

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