【发布时间】：2012-02-25 12:32:34
【问题描述】：
我在使用 jQuery 1.7.1 为 SVG 图像的高度设置动画时遇到了一个潜在的错误。我希望图像高度缩小到 0，同时保持相同的宽度。以下是我正在做的最小工作示例，它在 Chrome 和 Safari 中完美运行。编辑：从 Chrome 17 开始，Chrome 表现出与 Firefox 相同的行为，如下所述；有必要设置 preserveAspectRatio="none" 以获得所需的行为。显然，Chrome 中的前一种行为是一个错误（在 this bug report 中描述）。
<!DOCTYPE>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
var flip_timer = setInterval('flip()', 1000),
flip = function() {
var height = 64,
width = 96,
image = $('img');
image.animate({'height': 64, 'width': 0}, 200, 'linear', function() {
image.animate({'height': 64, 'width': 96}, 200);
});
};
</script>
</head>
<body>
<img src="image.svg" style="height:64px;width:96px;" />
</body>
</html>
然而，在 Firefox 中，宽度和高度一样变化：它似乎保持相同的比例（纵横比），所以当我缩小高度时，它也会缩小宽度。 （当我尝试仅更改宽度但保持高度不变时，会发生类似的行为。）
如果我使用 PNG 而不是 SVG，Firefox 会完全按照我的预期工作。
我还尝试了 jQuery 的各种版本，回到 1.2.6，并没有看到任何这种行为的变化。我尝试不设置不变的参数，我还尝试了传入字符串与整数，或者颠倒传入宽度/高度的顺序，但没有看到任何变化。
这是 Firefox 中的错误、jQuery 中的错误还是其他什么？ （我希望在提交错误报告之前在这里收集更多反馈，以防这已经众所周知或者我在某个地方犯了错误。）谢谢！
编辑：这是我一直在测试的 SVG 的内容，以防万一：
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="80px" height="60px" viewBox="0 0 80 60" enable-background="new 0 0 80 60" xml:space="preserve">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="40.0005" y1="60" x2="40.0005" y2="4.882812e-04">
<stop offset="0" style="stop-color:#0D0D0D"/>
<stop offset="1" style="stop-color:#000000"/>
</linearGradient>
<rect fill="url(#SVGID_1_)" width="80" height="60"/>
<path fill="#FFFFFF" d="M53.568,60c-0.006-2.305-0.082-5.051-0.234-8.261c-0.158-3.344-0.648-6.569-1.475-9.676
c-0.826-3.108-2.164-5.764-4.012-7.965c-1.85-2.203-4.504-3.304-7.965-3.304c-3.383,0-5.979,1.101-7.787,3.304
c-1.811,2.201-3.127,4.856-3.953,7.965c-0.826,3.106-1.318,6.332-1.476,9.676c-0.151,3.205-0.229,5.959-0.235,8.261H9.675
c0.019-8.13,0.825-14.935,2.419-20.414c1.611-5.546,3.794-9.972,6.549-13.275c2.752-3.304,5.959-5.664,9.617-7.08
c3.657-1.416,7.531-2.124,11.622-2.124c4.168,0,8.083,0.708,11.741,2.124s6.883,3.776,9.676,7.08s4.996,7.729,6.609,13.275
C69.5,45.064,70.303,51.872,70.322,60H53.568z"/>
</svg>
【问题讨论】：
-
image.svg 中有什么？它是否在外部 svg 元素上定义了 viewBox 属性？
-
确实如此。我刚刚用 image.svg 的内容更新了我的问题。定义 viewBox 会改变事情吗？ （如果有，是否有潜在的解决方法？）
标签： jquery firefox animation svg