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次，将x缩放5次，但从对象的0,0坐标开始变换。”

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

希望有所帮助！

RaphaelJS Icon奇怪的调整溢出

2 个答案: