javascript - 无法获取 SVG 矩形计算样式

Question

真的卡在这里了，

我创建了一个基于 % 作为宽度的矩形条。如果我调试它，我会在计算菜单中看到以像素为单位的宽度。我曾尝试在网上寻找解决方案，但没有。

这是我创建的 SVG 矩形，它是条形图的一部分。

<rect style="fill: white;" id="g2005" x="39px" y="240px" width="44.95%" height="15px" onmouseover="graphMouseIn(id)" onmouseout="graphMouseOut(id)"></rect>

下面我放置 XXXXX 的代码是我希望魔术插入以像素为单位的计算宽度的地方。

<animate attributeName="width" from="0" to="XXXXX" dur="0.10s" fill="freeze"></animate>

我曾尝试做一些事情来获得它，但它要么未定义要么为空。

下面的代码给了我NULL

<animate attributeName="width" from="0" to=' + ($('#g' + sightingYear).width()) + ' dur="0.10s" fill="freeze" />

下面的代码给了我 UNDEFINED

<animate attributeName="width" from="0" to=' + (('#g' + sightingYear).width) + ' dur="0.10s" fill="freeze" />

我也曾尝试使用 Window.getComputedStyle()、.InnerWidth，但都没有用。请帮助我，感谢你的帮助!!提前致谢。 :)

Answer 1

为什么需要计算像素宽度？您知道您可以只使用百分比值吗？

<animate attributeName="width" from="0%" to="44.95%"...

演示

<svg width="500" viewBox="0 0 500 15">
  <rect width="44.95%" height="15px">
    <animate attributeName="width" from="0%" to="44.95%" dur="3.10s" fill="freeze"></animate>
  </rect>
</svg>