Новые ответы с меткой svg
3
голоса
Принятый
Существует ли хотя бы жалкое подобие backdrop-filter blur для внутренних тегов SVG?
На основе удалённого ответа сделал наложение блюра, но с координатами пока небольшие сложности - надо как-то подвинуть. Постараюсь поправить...
html, body, svg {
margin: 0;
padding: 0;
...
1
голос
Существует ли хотя бы жалкое подобие backdrop-filter blur для внутренних тегов SVG?
Оберни всё предшествующее в группу, которую будешь накладывать поверх через use с blur'ом:
html, body, svg {
margin: 0;
padding: 0;
display: block;
width: 100%;
height: 100%;
}
.bg-blur ...
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 = ...
3
голоса
Как менять цвет svg-sprite?
Со стилями всё стандартно и просто, как в учебниках. Одно не пойму - почему, для создания простейших фигур, столько лишнего в SVG ? Такое пишется вручную, безо всяких редакторов:
svg { display: ...
2
голоса
Как менять цвет svg-sprite?
Ребятки, час в codepen не прошёл зря, поэтому делюсь с теми, кто не знает ответа на вопрос:
use.test1 {
fill: red
}
use.test2 {
fill: purple
}
use.test3 {
fill: yellow
}
<svg aria-hidden=...
2
голоса
Принятый
Анимирование позиций SVG элементов через JS
Ничего сложного - от Х-координаты курсора отнимаете половину ширины холста, чтобы точка отсчёта (читай нулевое смещение) была посередине. Далее, делите получившееся значение на нужный коэффициент, ...
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....
50 лучших ответов включены
Связанные метки
svg × 2384css × 1339
html × 1014
javascript × 759
css3 × 365
svg-animation × 312
анимация × 293
css-animation × 250
html5 × 238
вёрстка × 229
jquery × 155
canvas × 104
svg-спрайт × 69
inkscape × 41
d3.js × 40
clip-path × 38
svg-filter × 36
android × 32
изображения × 29
smil × 28
php × 27
reactjs × 25
файловые-пути × 23
xml × 21
веб-программирование × 18