svg - 如何使拉斐尔填充图案随元素移动？ (背景图像相对于元素的位置)

Question

我怎样才能给 Raphael 元素一个随着元素移动而移动的填充，就像 CSS background-image的 position: absolute; HTML 元素在移动时会保持相对于其位置的相同位置吗？

这是一个示例演示:如何使 Raphael 元素(三角形路径)的背景图像图案在拖动时与 HTML 元素(方形 div)表现相同？

http://jsbin.com/oxuyeq/8/edit

这个问题本质上与相反How to make a pattern “fixed” in Raphael.js / IE? 使用偏光眼镜模拟器 - 我想让他们试图避免的特定于 IE 的行为在所有浏览器(包括 IE8)中一致发生。

正如在另一个问题中详述的那样，仅在 IE8 (VML) 中，Raphael 元素的行为符合我的要求；但即使这样也是不稳定的:各种事情，比如打电话 setSize在 paper元素或重新定义填充(本质上，任何强制重绘)会导致它切换到其他行为。

有一个 question similar to this for pure SVG ，但在撰写本文时没有任何好的答案，当然也没有对拉斐尔有用的答案。

编辑 2 : 观察SVG模式下发生的事情，似乎每个Raphael变换也会自动对svg进行相同的矩阵变换<pattern>元素。我认为这就是导致我试图避免的行为的原因 - 我认为 patternContentUnits和 patternUnits是不相关的。有一个 Unresolved 问题似乎与此处相关(突出显示与 clip-rect 相同的问题，在 this.pattern && updatePosition(this); 行旁边)- https://github.com/DmitryBaranovskiy/raphael/issues/638

所以一种可能性可能是 to define a custom attribute将变换应用于元素而不将其应用于模式。听起来很难 - 可能需要破解 Raphael 或复制大量 Raphael 转换代码。希望有其他方法。和 god help us making this work in VML ...

编辑 3:一些潜在的相关信息，不仅仅是路径填充有这个问题。拉斐尔 image使用 paper.image() 创建的元素在 SVG 模式下没有这个问题，但在 IE8 VML 模式下有一个非常相似的问题。 Here's a demo 几种使图像元素移动的方法，下面是一个并排比较，显示它们如何在非 IE 中完美运行而在 IE 中都失败:

Answer 1

我最近偶然发现了一个类似的问题。我在任何地方都找不到可行的解决方案，所以我想出了自己的解决方案。我使用@user568458 的答案作为起点。首先，我像这样更改了 updatePosition 函数:

 updatePosition = function (o) {
    if(!o.data("relativeFill")) { //data is a custom store for user's properties
        var bbox = o.getBBox(1);
        $(o.pattern, {patternTransform: o.matrix.invert() + " translate(" + bbox.x + "," + bbox.y + ")"});
    }
},

我也换了 fill setFillAndStroke的案例功能如下:

var relativeFill = o.data("relativeFill"),
isURL = Str(value).match(R._ISURL);
if (isURL) {
    el = $("pattern");
    var ig = $("image");
    el.id = R.createUUID();
    $(el, {x: 0, y: 0, patternUnits: relativeFill ? "objectBoundingBox" : "userSpaceOnUse", height: 1, width: 1});
    $(ig, {x: 0, y: 0, "xlink:href": isURL[1]});
    el.appendChild(ig);

    (function (el) {
        R._preload(isURL[1], function () {
            var w = this.offsetWidth,
                h = this.offsetHeight,
                bbox = o.getBBox();
            $(el, {width: 1, height: 1});
            $(ig, {width: relativeFill ? bbox.width : w, height: relativeFill ? bbox.height : h});
            o.paper.safari();
        });
    })(el);
    o.paper.defs.appendChild(el);
    $(node, {fill: "url(#" + el.id + ")"});
    o.pattern = el;
    o.pattern && updatePosition(o);
    break;
}

然后每当你想使用它时，你必须设置 yourElement.data({ relativeFill: true })
这是一个具有相对和重复填充的工作示例: https://codepen.io/mmazur/pen/Gmebrj?editors=0010

我同意@user568458，这个解决方案非常丑陋，可能会在 future 的 Raphael 更新中停止工作。然而，拉斐尔最近变化不大，所以我可以冒这个险。

编辑:修复了此处描述的错误: Image blurry when using url fill pattern for svg circle