如何通过在svg

时间：2015-10-13 11:43:11

标签： javascript jquery svg

我想通过在svg中保持固定位置来缩放使用创建的元素。
我看了this
但是我的元素是用来创造的 所以它显示了 [![scaleerror]
我只能删除旧的并创建一个新的，但我觉得这有点麻烦。
所以我想知道它是否存在方便？ 

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

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

结果enter image description here
我看不出错误...

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

1 个答案:

答案 0 :(得分：0)

我通过以下参数完成： icon.setAttributeNS（null，＆＃34; transform＆＃34;，＆＃34; translate（＆＃34; + - 2 * x +＆＃34;，＆＃34; + -2 * y +＆＃34; ）＆＃34; +＆＃34; scale（3）＆＃34;）;

我认为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>
相关问题
最新问题