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。