RaphaelJS：在另一个 SVG 元素上绘制路径答案

【问题标题】：RaphaelJS: draw a path over another SVG elementRaphaelJS：在另一个 SVG 元素上绘制路径
【发布时间】：2012-02-14 21:47:10
【问题描述】：

我有一个 500x400px 的容器，我正在与 RaphaelJS 一起管理一些 SVG 好东西。我已经用这段代码加载了一张图片：

var img = paper.image("images/image.jpg", 50, 200, 90, 110);

现在我想画一条相对于这个元素的路径。我应该怎么做？如果我写类似：

var c = paper.path("M 18.00,79.75 C 18.00,79.50 52.50,79.75 52.50,79.75...");

路径是相对于父容器创建的，并且没有在我的图像上占据正确的位置。感谢您的支持

---编辑----

这是我的仪表板及其样式：

#canvas {
        float: left;
        width: 500px;
        height: 400px;
        border: 1px solid #333;
}

<div id="canvas"></div>

这是 javascript 代码的一部分：

// Creates canvas 500 × 400 inside canvas div
var paper = Raphael(document.getElementById('canvas'), 500, 400);
// Load an image at 50, 200
var img = paper.image("images/image.jpg", 50, 200, 90, 110);

之后，我想填充一个 SVG 路径，将其定位在我的图像上。如果我写类似：

var c = paper.path("M 18.00,79.75 C 18.00,79.50 52.50,79.75 52.50,79.75...");

此路径是在#canvas 容器上创建的，从 0,0 坐标开始。我该怎么办？

【问题讨论】：

最好你能提供更多代码，这样我们才能真正看到你的整个方法是什么样子的。
我已经更新了上面的代码，谢谢

标签： javascript raphael

【解决方案1】：

请查看这个小提琴http://jsfiddle.net/XRBRz/。在这个小提琴中，将黑色矩形想象为您的图像。通过将路径平移到矩形的原点，相对于黑色矩形绘制楼梯路径。路径（楼梯）也被赋予了一个与黑色矩形具有相同尺寸的剪辑路径，以剪辑黑色矩形之外的路径。

【讨论】：

【解决方案2】：

听起来您认为 Raphael 在创建形状等之间保持对当前笔位置的引用。我认为这不是真的......我相信当您添加路径时，该路径相对于画布 0,0。（请注意，路径 'M' 命令确实允许相对 moveTo 'm'，但我认为这仅在路径字符串中的初始路径之后才有效......在开始时，它似乎是绝对的，无论大小写）

因此，如果您想从图像的左上角开始路径，请以"M50,200" 开始路径字符串 - 对于右下角，以"M140,310" 开始。

如果您希望在该点保持附加到图像的路径，请将它们添加到集合中。但那是另一篇文章... :-)

【讨论】：