Как создать такой на svg?

Question

[testtostertest111]

Как такое сделать на svg?
jsfiddle.net/35skjm6q

Comments

[Антон Вебсайтовский]

svg, этот формат он не анимирует, через js, можно сделать чтобы менялся цвет к примеру ! допустим на корзину я так делал, когда в корзине товар, то значок корзины мигает, меняет цветы, я так делал чтобы он был более заметный.

[0ffff0]

Антон Вебсайтовский, хоть-бы загуглил перед тем как писать svg gradient animate

[Антон Вебсайтовский]

0ffff0, о точно ) я просто не видел что на svg можно такое делать, а зачем, если обычным css сделать можно.

[0ffff0]

Антон Вебсайтовский, конечно зачем нам лёгкий формат, отличного качества, когда есть цыэсэс с джыпегом

[Антон Вебсайтовский]

0ffff0, о джепеге и не говорили.

Answer 1

[RAX7]

Почитать вот тут https://webdesign.tutsplus.com/ru/tutorials/how-to...
и сделать

Comments

[Антон Вебсайтовский]

а зачем такое делать на svg? если на css лучше. или я чет не догоняю.

[testtostertest111]

А можно сделать так, чтобы с разными размерами так работало? То есть, чтобы не хардкодить значения, а допустим, svg внутри div, который имеет размеры 140x200px и чтобы svg растягивался до размеров div и работало всё так же?

[RAX7]

testtostertest111, убираешь в css ширину и высоту

.test2 {
  width: 100px; /* <- убрать */
  height: 100px; /* <- убрать */
}

в SVG прописываешь новый viewBox 140x200, и параметры анимации меняешь под него.

[testtostertest111]

RAX7, это да, но я имел в виду, что если я не знаю размеров div, который будет сгенерирован, думал, может как-то в автоматическом режиме можно вычислять.

[RAX7]

testtostertest111, можно preserveAspectRatio="none" поставить, растянет не пропорционально, но для градиента такой способ может подойти.

[testtostertest111]

RAX7, не помогает, нужно вручную менять позиции в rect, а можно как-то резиново сделать?