javascript - 拉斐尔 Javascript。更改与另一个对象相关的文本外观

Question

有谁知道在使用 Raphael 时如何根据文本相对于另一个对象的位置更改文本的外观？

我创建了一个 JS fiddle 来演示我的意思(链接如下)。

在这个例子中有一个橙色的矩形和一些部分重叠的文本。我希望文本仅在直接位于矩形上方时显示，而在不在矩形上方时隐藏。我将使用翻译来改变它的位置。

在这方面的任何帮助都会很棒。谢谢。

Link to JS Fiddle

Answer 1

如果我理解正确的话，可以使用 clip-rect 以这种方式完成。我不确定它是否正确。

JS Fiddle link

var paper = Raphael(10, 10,500,500);
var rect = paper.rect(10,100,200,100,3);
rect.attr({
fill: "orange",
stroke:"orange"});

var txt = paper.text(15, 180, "Hey diddle diddle\nThe cat and the fiddle\nThe dish ran away with the spoon\n The little dog laughed to see such fun\nAnd the cow jumped over the moon");

txt.attr({
    "text-anchor": "start",
    "font-family": "Arial",
    "font-size": "16px",
    "clip-rect": "10,100,200,100",
});