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>​

- Kristjan Kirpu

Answer 1

您的transform命令是围绕其标称中心缩放路径的，但看起来您想从左上角缩放它。因此，您看到的结果是图标超过容器的左上角，并出现在这种情况下的.message div之外。

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

总的来说，您需要确保Raphael纸张对象中有足够的空间进行所有的缩放变换。在您的例子中，它正在使用div的大小，其中您将height设置为auto。这意味着您的字体大小可能会影响纸张的大小并导致剪切问题。当存在疑虑时，请手动设置您的纸张大小。

- Plynx

Answer 2

好的，这似乎是因为默认情况下，比例变换会从对象中心进行缩放，因此它实际上是在容器之外进行缩放。

如果您希望，可以指定一个原点：

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

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

这里是文档，非常混乱。我尝试了几次才弄清楚如何阅读它！http://raphaeljs.com/reference.html#Element.transform

希望能有所帮助！

- Jason M. Batchelor

---

谢谢！ 确实有点困惑，起初我甚至不知道如何显示图标... - Kristjan Kirpu