cách quy mô phần tử bằng cách giữ vị trí cố định trong svg

Question

tôi muốn chia tỷ lệ phần tử bên dưới ở vị trí cố định.

<path id="container_svg_rectsymbol1" fill="red" stroke-width="1" stroke="Gray" d="M 73.1111111111111 -71.75 L 83.1111111111111 -71.75 L 83.1111111111111 -61.75 L 73.1111111111111 -61.75 L 73.1111111111111 -71.75" transform="scale(1)"/> 

khi bắt đầu chia tỷ lệ nó di chuyển từ một vị trí này sang vị trí khác. tôi không muốn di chuyển đối tượng tôi chỉ muốn phóng to kích thước của đối tượng.

tôi đã giới thiệu liên kết sau.

http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Transforming_the_Coordinate_System

cách chia tỷ lệ cố định?

tôi muốn tạo hiệu ứng cho phần tử, tức là phóng to kích thước ở vị trí cố định. tôi đã thực hiện theo cách sau. nhưng nó sill di chuyển các yếu tố từ nguồn gốc. vui lòng tham khảo mã dưới đây.

var box = element.getBBox(); 
var scaleVal=null, x=null, y=null; 
$(element).animate(
    { 
      scale: 1, 
      centerX:box.x+(4*transX), 
      centerY:box.y+(4*transY) 
    }, 
    { 
      duration: 4000, 
      step: function(now,fx) { 
       if (fx.prop == "scale") { 
        scaleVal = now; 
       } else if (fx.prop == "centerX") { 
        x = now; 
       } else if (fx.prop == "centerY") { 
        y = now; 
       } 

       if(!sf.util.isNullOrUndefined(scaleVal) && !sf.util.isNullOrUndefined(x) && !sf.util.isNullOrUndefined(y)) { 
        $(element).attr("transform", "translate("+(-x*(scaleVal-1))+","+(-y*(scaleVal-1))+")scale(" + scaleVal + ")"); 
       } 
      } 
    ) 

gọi liên kết bên dưới để chia tỷ lệ ở điểm chính giữa.

http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Transforming_the_Coordinate_System

nhưng vẫn bắt đầu từ nguồn gốc và phóng to phần tử.

Cảm ơn,

Siva

Answer 1

Scaling tập trung vào nguồn gốc (0, 0), vì vậy nếu hình của bạn không tập trung vào (0, 0), nó sẽ xuất hiện để di chuyển. Để sửa lỗi này đầu tiên dịch hình dạng của bạn vì vậy nó được tập trung vào nguồn gốc, sau đó mở rộng nó, sau đó dịch lại:

transform="translate(78.11 -66.75) scale(2) translate(-78.11 66.75)"

Lưu ý rằng các biến đổi được thực hiện theo thứ tự ngược.

Bạn có thể đơn giản hóa mọi thứ bằng cách tạo hình dạng căn giữa trên nguồn gốc để bắt đầu và sau đó mở rộng quy mô và chuyển đổi nó.

<path id="container_svg_rectsymbol1" fill="red" stroke="Gray" d="M -5 -5 v10 h10 v-10 h-10" transform="translate(78.11 -66.75) scale(3)"/>

Bạn cũng có thể chuyển đổi chuyển hóa thành ma trận, đó sẽ là hiệu quả hơn:

<path opacity="0.5" fill="red" stroke-width="1" stroke="Gray" d="M -5 -5 v10 h10 v-10 h-10" transform="matrix(3 0 0 3 78.11 -66.75)"/>

[EDIT] Để sử dụng jQuery động, điều này sẽ làm việc (mở rộng quy mô 0-1 hơn 4 giây):

 var box = element.getBBox(); 
     var cx = box.x + box.width/2; 
     var cy = box.y + box.height/2; 

     $(element).animate(
      { scale: 1 }, 
      { duration: 4000, 
       step: function(now, fx) { 
        scaleVal = now; 
        $(element).attr("transform", "translate(" + cx + " " + cy + ") scale(" + scaleVal + ") translate(" + (-cx) + " " + (-cy) + ")"); 
       } 
      } 
     ); 

Answer 2

OK, bây giờ tôi đã đọc lại câu hỏi của bạn, có vẻ như bạn muốn sử dụng transform="scale()" và gặp phải "di chuyển" bí ẩn cũng gây nhầm lẫn cho hầu hết những người mới bắt đầu học SVG (bao gồm tôi).

Scaling được đo từ origin(0,0), do đó nếu đối tượng là tại địa điểm (50,-100), khi áp dụng scale(2), vị trí đối tượng được tăng gấp đôi lên (50*2, -100*2) =>(100, -200). Do đó bạn cần sửa lỗi này theo số translate(-50,100).

Sử dụng matrix() sẽ là khu vực tiếp theo để khám phá vì nó khá trực quan. Ví dụ trên sẽ yêu cầu matrix(2 0 0 2 -50 100) để chia tỷ lệ và di chuyển nó trở về nguyên bản.Ngoài ra, với mã matrix(), bạn có thể thực hiện dễ dàng flip() và mirror() với trường thứ 2 và thứ 3. Một lần nữa bạn phải dịch chiều dài và/hoặc chiều rộng của đối tượng cho hai phép biến đổi này.