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

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

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