1

问题：

我正在尝试为 SVG 图条的高度设置动画：http: //jsfiddle.net/David_Knowles/pRTBt/

我的部分问题是.height()返回0，但.attr("height")返回真实高度。

$(function(){
var $theBars = $("#v-bars").children();
var BarsHeight = $theBars.each(function(index, element ) {
    var origHeight = $(this).attr("height");
    console.log( index + ": " + $(this).attr("height"));
    console.log( index + ": " + $(this).height());
});
});

我计划将高度设置为零并使用jquery.animate何时触发高度动画eventHander，但由于返回的高度问题似乎无法做到。

问题：

  1. 为什么.height()返回零？
  2. 例如，单击时将原始高度应用回条形的最佳方法是什么？

编辑：部分解决方案 http://jsfiddle.net/David_Knowles/pRTBt/12/

可以编辑高度属性。这需要弄清楚如何将值数组传递给它

4

1 回答 1

2

在 HTML 中，height 和 width 是 CSS 属性，即您可以编写<div style="height:100%;height:100%">并且 height() 将是 100%。在 SVG 中，高度和宽度是 XML 属性，所以你写<rect height="100%" width="100%">

attr() 获取属性值，这就是它起作用的原因。

您可以将原始值存储为自定义属性，惯例是使用数据开始此类事情，然后在单击时将自定义属性值应用回栏。

于 2013-05-20T15:18:58.033 回答