无法获取SVG矩形计算的样式

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

这是我创建的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，都没有工作，也试过。请帮助我，我感谢您的帮助！提前致谢。 :)

来源

2016-05-30 Kin Loo

你不能叫'getComputedStyle'上SVGElements（其中jQuery的'.WIDTH（）'不会调用），你需要'埃尔。 getBoundincClientRect（）。width' – Kaiido

@Kaiido'el.getBoundincClientRect（）。width'将在'px'中提供宽度。 – ozil

@ ozil，如果我正确地得到问题，那是OP所要的。 – Kaiido

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

<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>

来源

2016-05-30 10:09:31

谢谢，这工作正常，我想我在rect元素外有这个动画元素。 –

''不需要在''里面，就像我在我的例子中所做的那样。如果你愿意，它可以在外面。 –

无法获取SVG矩形计算的样式

回答

相关问题