使用 Raphael 在图像周围绘制圆形边框答案

【问题标题】：Paint rounded border around image using Raphael使用 Raphael 在图像周围绘制圆形边框
【发布时间】：2010-10-25 20:36:27
【问题描述】：

我正在使用 Raphael JavaScript 库。我想在图像（这是一个 Raphael 对象）周围绘制一个带有圆形边缘的边框，但我似乎无法弄清楚如何做到这一点。我尝试设置描边，但没有出现。

我有这个：

var paper = Raphael(10, 50, 500, 500);
var google_img = paper.image("http://www.google.com/images/logos/ps_logo2.png", 10, 10, 200, 200);

感谢我能得到的任何帮助！

【问题讨论】：

标签： javascript raphael

【解决方案1】：

如何使用图像作为填充：

var paper = Raphael(10, 50, 500, 500);
paper.rect(10, 10, 364, 126, 20).attr({
    fill: "url(http://www.google.com/images/logos/ps_logo2.png)",
    "stroke-width": 2
});

【讨论】：

这可能是最简单的解决方案。我认为不使用此功能的唯一原因是您需要在 Raphael 中缩放图像。
不幸的是，使用这种优雅的解决方案，图像不适合矩形尺寸。

【解决方案2】：

我认为您在谈论剪切路径。查看Clipping path on Wikipedia。离开 Google 后，我从 Raphaël 的 Google 小组中发现了一些不幸的消息：

raphael 应用程序必须在没有插件的情况下在 Internet Explorer 中运行。 [剪切路径] 在 SVG 中可用，但 Internet Explorer 不支持 svg。相反，它使用专有的 microsoft VML“标准”(http://msdn.microsoft.com/en-us/library/bb263898(v=VS.85).aspx)

总之（恕我直言）拉斐尔只能“在”svg 操作和 VML 操作的交集内。

（来自Does RaphaelJS support clipping masking compositing?，Sebastian Gurin 发帖）。

如果您有兴趣使用插件在支持它的浏览器中启用剪辑，请查看该主题。

或者，您可以尝试在与图像相同的位置绘制一个尺寸相同的未填充的描边矩形，但使用图像集的r 属性，并且stroke-width 足够大以补偿半径（请注意，这可能会导致隐藏图像的末端）。

【讨论】：