2013-09-18 4 views
2

Чтобы использовать CSS-переходы (в Chrome, FF), я начал переводить некоторые стили атрибутов SVG в стили CSS. Тем не менее, у меня возникла проблема в Chrome: при переводе, похоже, ведет себя по-другому, если масштаб окна не равен 100%.SVG в Chrome: преобразование атрибута ≠ преобразование CSS

<svg style="position:absolute"> 
    <rect width="20" height="20" fill="blue" 
    transform="translate(50,50)"></rect> 
</svg> 
<svg style="position:absolute"> 
    <rect width="20" height="20" fill="red" 
    style="-webkit-transform:translate(50px,50px)"></rect> 
</svg> 

http://jsfiddle.net/mP493/

enter image description here

Красный треугольник должен быть синим треугольником, но это не так, когда я приближать. Должен ли я отказаться от моего плана, чтобы перевести SVG атрибутов стилей стили CSS ?

+0

Если я отправлю ответ «Да», вы примете его? Кажется, что это тонко завуалированная жалоба, или сообщение об ошибке или что-то еще. _ «Я делаю X, но это не дает мне результаты, которые я хотел. Означает ли это, что мне нужно прекратить делать X, чтобы получить результаты, которые я хочу?» Да. Да, да. – Phrogz

+0

:-) Справедливая точка. Я новичок в web-dev и не знаю спецификации SVG достаточно хорошо, чтобы сказать, если это ошибка. Ответ, на который я надеялся, - «вы должны использовать' 50unit' в CSS »или« вот как вы можете применить переход к атрибутам SVG ». Если это действительно ошибка, и нет легкой работы, «да» - это ответ. –

ответ

0

Похоже, я собираюсь с анимацией SMIL. Они позволяют переходы для атрибутов презентации SVG и имеют good достойная поддержка сейчас в FF и Chrome.

Основным недостатком является то, что не просто отменить анимацию в обратном направлении от того места, где она находится, если анимация не завершена.

Смежные вопросы