通过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 + ')';