SVG：使一个元素的属性依赖于另一个元素的属性

Question

我有一个简单的SVG树，我希望rect2的x属性依赖于（引用）rect1的宽度：

<rect id="rect1" style="fill:black" x="35" y="0" width="30" height="40" />
<rect id="rect2" style="fill:black" x="**rect1.width**" y="40" width="26" height="10" />

在SVG中有可能发生这种情况，我在yahoogle或SVG参考中找不到它。

另一种方法是变量

**var widthOfRect1 = 30**
<rect id="rect1" style="fill:black" x="35" y="0" width="widthOfRect1" height="40" />
<rect id="rect2" style="fill:black" x="widthOfRect1" y="40" width="26" height="10" />

有没有办法做到这一点？ 我知道您可以传入参数，但这并不是我想要的。

有想法吗？

Answer 1

可以对突变事件执行此操作。

创建小提琴http://jsfiddle.net/Afhmn/

随着rect1宽度的增加，在DOMAttrModified处理函数中，rect2的x发生了变化。