Почему transform: scale() размывает SVG?

Question

[Денис Букреев]

Такие дела.
Делаю похожую на это анимацию (смотреть логотип): tuborg0001.fallwinter.dk
На примере transform меняется с помощью js, в качестве изображения - png

У меня же transform меняется с помощью смены классов, в качестве изображения - SVG

При этом на примере изображение увеличивается без размытия, у меня все мылится - что за беда? Как избежать?

Answer 1

[iBird Rose]

там изменение идет плавное. сделано через формулу синусоиды. и вся анимация scale через js. а при анимации через классы и transition - рендер браузерный идет другой. скорее всего из за этого

Comments

[Денис Букреев]

через формулу синусоиды? на сколько это сложно?
я просто смотрю, что никаких плагинов не подключается в HTML, т.е. разработчик руками все выписывал

[iBird Rose]

Денис Букреев: открываешь tuborg0001.fallwinter.dk/assets/js/Application.js и ишещь по заросу "globallogo". можешь прям весь код скопипастить себе и разобрать.

Answer 2

[dom1n1k]

CSS-свойства transform применяются к уже отрендеренному, т.е. растровому, изображению. SVG сначала растеризуется, а потом растягивается стилями. Это дает как плюсы (скорость), так и минусы (мыло).
Это одна из причин, почему эти свойства нельзя бездумно совать везде подряд, как это обожают делать некоторые современные верстальщики.

Comments

[Денис Букреев]

но в примере так же transform применяется к уже отрендеренному изображению