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

Question

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

~~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
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.

@HimeshAadeshara I complete it but I think that answer is not good ... — 张绍峰, Oct 20 '15 at 02:29
@HimeshAadeshara I mean we don't need to move to the origin (0, 0),just scale and translate it.If scale(n),translate ( (1-n)cx,(1-n)cy). — 张绍峰, Oct 20 '15 at 02:54

score 1 · Accepted Answer · edited May 23 '17 at 10:33

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>

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

1 Answers1