如何通过在 svg 中保持固定位置来缩放使用创建的元素答案

【问题标题】：how to scale the element created by use by keeping the fixed position in svg如何通过在 svg 中保持固定位置来缩放使用创建的元素
【发布时间】：2015-10-13 11:43:10
【问题描述】：

我想通过在 svg 中保持固定位置来缩放使用创建的元素。
我读了this
但我的元素是通过使用创建的
所以它显示

~~我可以简单地删除旧的并创建一个新的，但我觉得这有点麻烦。~~
~~所以不知道有没有方便的方式？~~

 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));
    }

不知道够不够。我还在修改它，它可以运行但它的效果仍然不正确。

结果
我看不到错误...

PS：不幸的是，我使用defs元素而不是symbol元素来创建图标。我也想知道它们的区别，包括g元素。

【问题讨论】：

请显示一些代码
@HimeshAadeshara 我完成了，但我认为答案不好......
@HimeshAadeshara 我的意思是我们不需要移动到原点 (0, 0)，只需缩放和翻译它。如果 scale(n),translate ( (1-n)cx,( 1-n)cy)。

标签： javascript jquery svg

【解决方案1】：

我通过这个参数完成它： icon.setAttributeNS(null, "transform", "translate("+-2*x+"," + -2*y +")" + "scale(3)" );

我认为post 犯了一些错误......

这个例子可能有意义。

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

【讨论】：