Raphaël.js：如何缩放圆形的填充图像以适合圆形？答案

【问题标题】：Raphaël.js: How to scale a circle's fill image to fit the circle?Raphaël.js：如何缩放圆形的填充图像以适合圆形？
【发布时间】：2012-05-04 15:55:49
【问题描述】：

我正在尝试使用 Raphael 的 VML 功能来生成带有图像的圆圈（修复了缺少边框半径的 IE8）。

我的问题是，如果我使用

circle.attr({fill: 'url(image.jpg)'});

而且我的图像大于仅显示部分图像的圆圈，我找不到将图像缩小到圆圈直径的方法。

我该怎么做？

【问题讨论】：

【解决方案1】：

您是否认真考虑使用 RaphaelJS 修复 IE8 边框半径？我会建议像css3pie 这样的东西，甚至还有question in SO 的用法。

但是，如果你想使用 RaphaelJS，你将需要使用 Element.transform 来缩放你的图像，然后才能使用另一个元素设置圆角效果。

【讨论】：

是的，我是认真的，它是一个图形树，每个项目都是四舍五入的，所以它不是到处都是按钮。所有的项目都聚集在一个地方，我已经解决了定位，但填充图像没有缩放。我会尝试转换。 css3pie 是我的第一个候选者，但它无法处理带有子元素的元素的边框半径，它们不会切角。
Tirithen，您应该从您的情况中展示更多内容，一些客户端代码可以重现您的确切情况。
@Deele - 您不能使用 Element.transform 来缩放设置为填充图案的图像。问题很清楚 - 这不是关于边界半径，而是关于缩放圆圈的填充图像以适合圆圈。您也不需要更多代码来了解问题所在。 Tirithen - 你应该检查这个解决方案，因为我有同样的问题：stackoverflow.com/questions/1098994/… 这个解决方案在这种情况下有效。您只需要设置正确的宽度和高度，可能与您的圆圈相同。