RaphaelJS圖標奇怪的調整大小溢出

Question

我正在嘗試調整我的raphaeljs圖標。但我有一些奇怪的調整大小溢出問題，我不知道如何解決，但我已經嘗試了一些方法。

我這兒有問題的活動鏈接：http://jsfiddle.net/ydmSB/2/

這是JS代碼：

var message = "M16,5.333c-7.732,0-14,4.701-14,10.5c0,1.982,0.741,3.833,2.016,5.414L2,25.667l5.613-1.441c2.339,1.317,5.237,2.107,8.387,2.107c7.732,0,14-4.701,14-10.5C30,10.034,23.732,5.333,16,5.333z"; 

var elements = document.querySelectorAll('.message'); 
for (i = 0; i < elements.length; i++) { 
    paper = Raphael(elements[i], 200, 200) 
    paper.path(message).attr({ 
     "fill": "#333" 
    }).transform("s5"); 
}​ 

我的CSS代碼：

.wrapper { width:400px; height:auto; margin-left:auto; margin-right:auto; } 
.icon { 
    margin-left:50px; 
    margin-top:50px; 
}​ 

我的HTML代碼：

<div class="wrapper"> 
    <div class="icon"> 
     <div class="message"> 

     </div> 
    </div> 
</div>​ 

Answer 1

你的transform命令是縮放你的路徑圍繞其名義中心，當它似乎你想從左上角進行縮放。所以你看到的結果是縮小容器左上角的圖標，在這種情況下，你的.message股利。

一個修復方法是爲您的變換提供一箇中心點，例如transform("s5,5,0,0")。另一個是爲縮放發生提供更多空間。另一種方法是向變換提供x，y轉換（例如，t50,50）。

通常，您需要確保在包含Raphael紙張對象中有足夠的空間來進行所有縮放轉換。在你的例子中，它取得了div的大小，其中height設置爲auto。這意味着您的字體大小可能會影響紙張的大小並導致裁剪問題。如有疑問，請手動設置紙張尺寸。

Answer 2

好的，這似乎是由於事實上，默認情況下，縮放比例從對象的中心向上擴大，所以它實際上是縮放到您放置的容器的外部。

如果您想要對，你可以指定一個原點：

}).transform("s5,5,0,0"); 

這基本上說，「五倍縮放X了5倍，而y，但開始從對象的0,0座標變換。」

該文檔在這裏，並混淆爲地獄。帶我嘗試瞭解如何閱讀它！ http://raphaeljs.com/reference.html#Element.transform

希望有所幫助！