Новые ответы с меткой

3 голоса
Принятый

Существует ли хотя бы жалкое подобие backdrop-filter blur для внутренних тегов SVG?

На основе удалённого ответа сделал наложение блюра, но с координатами пока небольшие сложности - надо как-то подвинуть. Постараюсь поправить... html, body, svg { margin: 0; padding: 0; ...
Qwertiy's user avatar
  • 121k
1 голос

Существует ли хотя бы жалкое подобие backdrop-filter blur для внутренних тегов SVG?

Оберни всё предшествующее в группу, которую будешь накладывать поверх через use с blur'ом: html, body, svg { margin: 0; padding: 0; display: block; width: 100%; height: 100%; } .bg-blur ...
Qwertiy's user avatar
  • 121k
4 голоса
Принятый

SVG анимация path, при изменении атрибута values анимация начинается сначала

Тебе нужно менять начало анимации function getPath(item) { let x = item.offsetLeft + item.offsetWidth; return `M${x} 15 L ${40+x} 30 V20 H${60+x} V10 H${40+x} V0 Z`; } window.onload = ...
Илья Яловой's user avatar
3 голоса

Как менять цвет svg-sprite?

Со стилями всё стандартно и просто, как в учебниках. Одно не пойму - почему, для создания простейших фигур, столько лишнего в SVG ? Такое пишется вручную, безо всяких редакторов: svg { display: ...
UModeL's user avatar
  • 32.4k
2 голоса

Как менять цвет svg-sprite?

Ребятки, час в codepen не прошёл зря, поэтому делюсь с теми, кто не знает ответа на вопрос: use.test1 { fill: red } use.test2 { fill: purple } use.test3 { fill: yellow } <svg aria-hidden=...
Ivan Malovichko's user avatar
2 голоса
Принятый

Анимирование позиций SVG элементов через JS

Ничего сложного - от Х-координаты курсора отнимаете половину ширины холста, чтобы точка отсчёта (читай нулевое смещение) была посередине. Далее, делите получившееся значение на нужный коэффициент, ...
UModeL's user avatar
  • 32.4k
2 голоса

Существует ли хотя бы жалкое подобие backdrop-filter blur для внутренних тегов SVG?

Вот, что то похоже, вроде работает Буду дальше искать варианты * { margin: 0; padding: 0; } .blurred { fill: #fff; filter: blur(5px); } <svg viewBox="0 0 152 105" xmlns="http://www.w3....
Monkey Mutant's user avatar

50 лучших ответов включены