Изменить атрибуты svg polygon через Javascript

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 для масштабирования и соответственно переводит полигоны карты изображения.

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> 

Я положил некоторые идентификаторы в многоугольников в случае, если я не мог перебирать по тэгу, но он работает путем получения многоугольников тэгу и циклический переход через цикл for. :-) CSS-код для #MainImage DIV в основном:

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

Answer 2

Когда вы устанавливаете атрибут преобразования с помощью setAttribute, вы не помещаете его в двойные кавычки. Так что вам нужно, это

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