RaphaelJS Icon 奇怪的调整大小溢出

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 div。

一种解决方法是为您的变换提供一个中心点，例如transform("s5,5,0,0")。另一个是为缩放提供更多空间。另一种方法是为转换提供 x,y 转换（例如t50,50）。

一般来说，您需要确保包含的 Raphael 纸对象中有足够的空间来进行所有缩放转换。在您的示例中，它采用 div 的大小，其中您将 height 设置为 auto。这意味着您的字体大小可能会影响纸张的大小并导致剪裁问题。如有疑问，请手动设置纸张尺寸。

Answer 2

好的，这似乎是由于缩放变换默认情况下从对象的中心向上缩放，因此它实际上是在您放入它的容器之外缩放。

如果你愿意，你可以指定一个原点：

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

这基本上是说，“将 x 缩放 5 倍，将 y 缩放 5 倍，但从对象的 0,0 坐标开始变换。”

文档在这里，令人困惑。我试了几次才弄清楚如何阅读它！ http://raphaeljs.com/reference.html#Element.transform

希望有帮助！