CODEWITHSUNDEEP
javascriptjquerysvg
张绍峰
张绍峰

Reputation: 311

how to scale the element created by use by keeping the fixed position in svg

I want to scale the element created by use by keeping the fixed position in svg.
I read this
but my element is created by use
so it shows
[![scaleerror]
Simply I can remove the old one and create a new one ,but I feel this a bit trouble.
So I wonder whether it exists any convenient way? 

 function tableBindMouseClick(parametersObject)
{
    var table = document.getElementById("PointsTable");
    var length = $('#PointsTable tbody tr').length;//get table rows number


    for(var  i =0;i<length;i++)
    {
        var id = i;
        $($('#PointsTable tbody tr')[i]).bind('click',
            (function(id)
            {
                return function()
                {
                    var p = parametersObject.pointArray[id];
                    var x = p[0] -5;//coordinate x
                    var y = p[1] -5;//coordinate y
                    var icon = document.getElementById("point"+id);
                    icon.setAttributeNS(null, "transform", "translate("+-x+"," + -y +")   scale(3) translate("+x+","+y+")");

                };
            })(id));
    }

I do not know whether it is enough. I am still modifying it.It can run but its effect is still incorrect.

The result enter image description here
I can not see the error...

PS:Unfortunately,I use the defs element instead of symbol element to create icon.I also want to know difference in them,including g element.

Upvotes: 0

Views: 73

Answers (1)

张绍峰
张绍峰

Reputation: 311

I complete it by this parameters: icon.setAttributeNS(null, "transform", "translate("+-2*x+"," + -2*y +")" + " scale(3)" );

I think the post makes some mistakes...

This example may make sense.

<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Scalable Vector Graphics (SVG) 1.1 (Second Edition)</title>
</head>
<body>


<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.1" width="5000" height="5000" viewBox="0 0 5000 5000">

     <rect x="100" y="100" width="30" height="30" stroke="black"    fill="transparent" stroke-width="5"/>

     <rect x="100" y="100" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"
transform ="translate(-230,-230 ) scale(3)" />

</svg>
</body>
</html>

Upvotes: 1

Related Questions