1

我正在尝试缩放和转换 svg 多边形元素，具体取决于浏览器窗口的大小。计算我想要缩放和平移多少不是问题，但更改多边形对我来说是。

我希望你能帮助...

我已经分解了这个问题，以便计算多边形的数量（这没关系）：

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

和一个函数，它创建一个字符串来确定多边形的 transform="" 属性 - 可以说 transform 属性 - transform="translate(800,00) scale(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 的值，它也不起作用。你能帮忙吗？

4

2 回答 2

0

使用 setAttribute 设置转换属性时，不要将其放在双引号中。所以你需要的是

transformattribute = 'translate('+ translateAmount +',0) scale(' + scaleAmount + ')';
于 2013-03-22T18:41:14.350 回答
0

在 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>

我在多边形中放置了一些 id，以防我无法通过 TagName 循环，但它通过通过 tagname 获取多边形并通过 for 循环循环来工作。:-) #MainImage div 的 css 基本上是：

#MainImage {background-image: url('pix/file.jpg'); background-size: auto 100%;}
于 2013-03-25T14:27:49.043 回答