Я столкнулся с потенциальной ошибкой при использовании jQuery 1.7.1 для анимации высоты изображения SVG. Я хочу, чтобы высота изображения уменьшалась до 0 при сохранении той же ширины. Ниже приведен минимальный рабочий пример того, что я делаю, и он отлично работает в Chrome и Safari. РЕДАКТИРОВАТЬ: начиная с Chrome 17, Chrome демонстрирует то же поведение, что и Firefox, описанный ниже; необходимо установить preserveAspectRatio="none", чтобы получить желаемое поведение. По-видимому, прежнее поведение в Chrome было ошибкой (описанной в этом отчете об ошибках ).
<!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>