如何通過保持svg中的固定位置來縮放使用創建的元素

-1

我想通過保持svg中的固定位置來縮放使用創建的元素。
我讀this
但通過使用
創建我的元素，使其顯示

~~只要我可以刪除舊的，創造一個新的，但我覺得這個有點麻煩。~~
~~所以我想知道它是否存在任何方便的方式？~~
如何通過保持svg中的固定位置來縮放使用創建的元素

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組件，而不是符號元素創建icon.I也想知道它們的區別，包括g ^元件。

來源

2015-10-13 張紹峯

請出示一些代碼 –

@HimeshAadeshara我完成它，但我認爲這個問題的答案是不好的...... –

@HimeshAadeshara我的意思是，我們並不需要移動到原點（0,0），只是規模並翻譯它。如果scale（n），翻譯（（1-n）cx，（1-n）cy）。 –

我通過以下參數完成它： 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>

來源

2015-10-20 02:27:57

如何通過保持svg中的固定位置來縮放使用創建的元素

回答

相關問題