拉斐尔 JavaScript。更改相对于另一个对象的文本外观答案

【问题标题】：Raphael Javascript. Change text appearance in relation to another object拉斐尔 JavaScript。更改相对于另一个对象的文本外观
【发布时间】：2012-09-22 02:36:32
【问题描述】：

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

我创建了一个 JS fiddle 来演示我的意思（下面的链接）。

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

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

Link to JS Fiddle

【问题讨论】：

这似乎是不可能的 - 看到这个线程groups.google.com/group/raphaeljs/browse_thread/thread/…
谢谢。我搜索了遮罩，看起来有人可能使用图像进行了类似的工作：http://2hats.net/_box/raphael/peel_test.html

标签： javascript jquery raphael

【解决方案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",
});

【讨论】：