Raphael Javascript. Изменение внешнего вида текста по отношению к другому объекту

Question

Кто-нибудь знает, как изменить внешний вид текста по отношению к его положению против другого объекта при использовании Raphael?

Я создал скрипт JS, чтобы продемонстрировать, что я имею в виду (ссылка ниже).

В примере есть оранжевый прямоугольник и некоторый текст, который частично перекрывает его. Я хотел бы, чтобы текст отображался только тогда, когда он прямо над прямоугольником и скрыт там, где он отсутствует. Я буду использовать перевод, чтобы изменить его положение.

Любая помощь по этому вопросу была бы блестящей. Спасибо.

Link to JS Fiddle

Answer 1

Если я правильно вас понял, это может быть сделано таким образом, используя клип-прямоугольник. Я не уверен, правильно ли это.

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", 
});