Question

我正在使用Raphael在组织结构图（或流程图）中创建各个部门之间的界限，但我需要能够实际点击其背后的部门和内容。

如果我可以让画布落后于其他元素，有点像背景图像，那就是想法。这可能吗？

Answer 1

我找到了解决方案。 Raphael制作了一个绝对定位于我的SVG画布。绝对位置充当层，因此要在该层之上，我的内容也必须绝对定位。

如果其他人有更好的解决方案，我会很高兴听到它，虽然这样做很好。

Answer 2

我所做的是在正在渲染的信息线之上创建一层不可见（但可点击）的形状，这将作为下面内容的目标区域。

如果在Raphael中创建了目标较低的图层，则可以轻松克隆它们，将不透明度设置为0，并将该图层置于顶部。 （有关将图层轻松分组在一起的方法，请参阅Sets Reference。）

示例：

@el = @parent.paper.rect(x,y,w,h); //your existing lower layer shape definition
@elTrigger = @el.clone();   //clone your existing shape
@elTrigger.attr
    fill: '#fff'
    opacity: 0
    cursor: 'pointer'
@elTrigger.click(someAction); //assign the function

如果您的下层没有被Raphael渲染（只是HTML），您仍然可以做类似的事情，但它需要创建新的（透明）形状，以便位于下面目标的近似坐标之上

将Raphael（SVG）画布放在其他部门后面，使它们可以点击？

2 个答案: