如何使用jQuery SVG與變量

這樣的改變轉型：如何使用jQuery SVG與變量

svg.configure({viewBox: '0 0 100 100'}, true); 
svg.configure({transform:'translate(100,200)'},true);

它工作正常！但是，如何將該變量置於設置？是這樣的：

var X=100; 
var Y=200; 
var width=500; 
var height=400; 
var newX=100; 
var newY=200; 
svg.configure({viewBox: 'X Y wdth height'}, true); 
svg.configure({transform:'translate(newX,newY)'},true);

它不能工作？如何將變量放入？

來源

2011-10-29 Pin Rob

請嘗試以下

<html> 
<head> 
    <link href="jquery.svg.css" rel="stylesheet" type="text/css"> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
    <script type="text/javascript" src="jquery.svg.min.js"></script> 
    <script type="text/javascript"> 

     $(document).ready(function(){ 
      $('#svgbasics').svg({onLoad: drawInitial}); 
     }); 

     function drawInitial(svg) { 
      var X=0; 
      var Y=0; 
      var width=500; 
      var height=600; 
      var newX=100; 
      var newY=100; 
      svg.configure({viewBox: X + " " + Y + " " + width + " " + height}, true); 


      var circle = svg.circle(75, 75, 50, {fill: 'none', stroke: 'red', 'stroke-width': 3}); 
      var g = svg.group({stroke: 'black', 'stroke-width': 2}); 
      var line = svg.line(g, 15, 75, 135, 75); 
      var line2 = svg.line(g, 75, 15, 75, 135); 

      svg.configure(line, {transform:'translate(' + newX + ',' + newY + ')'},true); 
     } 

    </script> 
</head> 

<body> 
<div id="svgbasics"></div> 
</body> 
</html>

這將創建一個通過串聯與下一頁末和newY值一個新的字符串，使得JavaScript解釋器會看到

'translate(100,200)'

希望這有助於

來源

2011-10-29 02:58:06

它仍然無法工作的代碼： svg.configure（{transform：'translate（'+ newX +'，'+ newY +'）'}，true）; 它無法捕捉變量（newX和newY），只使用默認值（0,0）。我檢查網站上的幫助，但無法找到解決方案！ http://keith-wood.name/svgRef.html#configure –

我找到了svg.configure（{viewBox：'0 0 100 100'}，true）; 它像=>視框= '0 0 100 100'（這是正確的！）但 svg.configure（{變換： '翻譯（0,10）'}，真）; 它不能作爲工作=>變換=「‘翻譯（0，10）’」（以下簡稱「'是錯誤的）它必須變換=‘翻譯（0，10）’，但是當我寫的代碼svg.configure （{transform：translate（0,10）}）;它不能工作！它是一個由jQuery SVG的錯誤嗎？ –

我已經添加了一個更完整的例子，如果你註釋掉轉換，你會看到第一行出現。有一件事我無法確定，爲什麼變換強制屏幕上的線條，但這是一個單獨的問題。 –

我在節點上建議.change功能而不是.configure

svg.change(Node, { transform: 'translate(' + newX + ',' + newY + ')' }); 
//Node can be any of the svg nodes from Eric's solution

如果將最後一個參數設置爲true，則會刪除所有其他屬性，因此我認爲.change會更好。

來源

2012-08-13 12:19:12 Puneet

如何使用jQuery SVG與變量

回答

相關問題