Вопросы с меткой [svg-filter]
Руководство по использованию метки svg-filter отсутствует.
36
вопросов
-2
голоса
2
ответа
51
показ
Как сделать по нажатию кнопки применение фильтра
Мне нужно сделать функцию,что-бы при нажатии на кнопку менялся фильтр у изображения
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>API</...
1
голос
1
ответ
81
показ
"filter" или "inline svg" для background-image?
Считается ли костылем использовать свойства filter для background-image вместо inline svg
для смены цвета вместо
fill: #ffa500
использовать
filter: invert(65%) sepia(54%) saturate(2331%) hue-rotate(...
2
голоса
3
ответа
136
показов
Как реализовать закругления уголков у фигуры CSS?
Я пробую так, но не получается добиться скругления, как на скрине.
body {
padding: 15px;
}
.arrow {
background: #8ec63f;
color: #fff;
display: inline-block;
height: 30px;
line-height:...
1
голос
1
ответ
31
показ
SVG - маска с фильтром feGaussianBlur радиальным градиентом
Я хочу размыть углы изображения, сохранив резкий центр. Использование css backdrop-blur() исключено, потому что Firefox его не поддерживает. Добавление резкого изображения поверх размытого и затем ...
6
голосов
3
ответа
69
показов
Есть ли способ раскрасить белое изображение PNG только с помощью CSS?
Я знаю, что существует много фильтров css, особенно для webkit, но я не могу найти решение для раскрашивания белого (#FFFFFF) изображения. Я пробовал использовать несколько комбинаций фильтров, но ни ...
2
голоса
1
ответ
35
показов
Размытие SVG с четкими краями фигуры
Я пытаюсь создать размытие на элементе многоугольника SVG с помощью fegaussianblur. Вот что у меня получилось.
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="...
2
голоса
1
ответ
21
показ
Как использовать feComposite, когда вход не является частью объекта фильтра?
<svg>
<style>
#ani{
stroke-dasharray: var(--len);
stroke-dashoffset: var(--len);
}
#shadow{
filter:url(#Blur);/*omit*/
}
<style>
<script>...
2
голоса
1
ответ
36
показов
Как добавить четкости, полученным SVG-фильтрами, контурам. Не добавляется contrast(200%) после SVG-фильтров
Пробую получить контуры изображений с помощью серии фильтров SVG. На сниппете можно переключать изображения и включать/выключать наложение фильтра.
let img_sources = [
"https://image.freepik....
2
голоса
2
ответа
59
показов
Как смягчить действие фильтра SVG? Получить более сглаженные границы?
Есть работа фильтров SVG и последующая анимация через JS. Настраиваю feTurbulence, передаю на вход feDisplacementMap, но получаю довольно "жесткий" результат - границы эффекта угловатые, не ...
3
голоса
2
ответа
34
показа
Как я могу частично заполнить как положительное, так и отрицательное пространство в фигуре SVG?
Я хочу заполнить прогресс SVG двумя разными цветами
SVG код:
--
path d="M129.309 26.342C129.201 22.884 128.659 22.009 125.904
19.457C112.662 7.974 95.397 1 76.491 1C34.797 1 1 34.8 1 76.494C1 ...
2
голоса
2
ответа
63
показа
Вырезать часть изображения CSS
Я пытаюсь создать эффект анимации glitch изображения.
Я использую слои с режимами смешивания и обрезки контуров.
А как я могу вырезать часть основного изображения?
Так как я хочу добиться эффекта ...
2
голоса
1
ответ
29
показов
Создание натурально закругленных углов с помощью CSS
Я пытаюсь создать привлекательную пластовую колонку (геология). Мне нужно создать несколько сотен таких, поэтому для поддержания единообразия требуется решение CSS.
Ниже представлена нарисованная от ...
1
голос
2
ответа
18
показов
Добавить концентрические линии вокруг прямоугольника в SVG
Я пытаюсь создать прямоугольник с тремя borders вокруг, используя фильтры. Результат должен выглядеть так:
но мой результат выглядит так:
Мой код:
<svg width=1000 height=1000 >
<...
3
голоса
3
ответа
330
показов
Как сделать шестиугольник с закругленными краями с помощью CSS
Это мой CSS:
#hexagon-circle {
width: 100px;
height: 55px;
background: red;
position: relative;
border-radius: 10px;}
#hexagon-circle:before {
content: "";
...
3
голоса
3
ответа
127
показов
Как в SVG сделать вокруг рисунка гало-контур?
У меня есть рисунок SVG, пример кода ниже.
Необходимо сделать вокруг всего рисунка белый гало-контур шириной N пикселей через фильтр.
Необходимо найти решение не для конкретного этого рисунка, а ...
1
голос
1
ответ
36
показов
Оформление текста для форума css
Хочу добавить что-то по типу "брызг" на текст. К примеру, белый текст и на нём красные брызги, но не знаю как это написать. Максимум, что выходило - градиент.
Прикрепляю код просто белого ...
6
голосов
2
ответа
510
показов
как сделать Градиентное Размытие CSS3
Вопрос следующий, как сделать градиентное размытие, чтобы в левом краю картинки размытие было максимальным, а уже в правом его совсем не было. Гуглил, там используют css свойство filter:blur(5px);. А ...
1
голос
0
ответов
60
показов
Почему SVG-файл не добавляется в качестве фона через CSS-свойство background-image?
Я пытаюсь сделать размытие фонового изображения. Для этого в папку /img я положил растровый исходник (bg_seller_hub.jpeg) и создал SVG-файл, который должен применить к нему размытие:
<svg width=...
4
голоса
1
ответ
78
показов
Фильтр feComposite: удаление частей фигур в месте их пересечения
Сделал вот такую фигуру:
<svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="10 15 75 75" preserveAspectRatio="xMinYMin" style="width: 150px; height: 150px; border: 1px dotted red;">
&...
4
голоса
1
ответ
55
показов
Размытие форм SVG при прохождении по траектории обрезки (clipPath)
Пример ниже:
Я хотел бы сохранить фиксированную область в середине, через которую анимируются
круги svg.
Большинство примеров, которые я видел, включают какое-то слияние, в результате которого видны ...
3
голоса
1
ответ
88
показов
Атрибут stdDeviation у фильтра feGaussianBlur выполняется по разному в разных браузерах
Размытие работает по разному во всех браузерах, основанных на Blink (это Chrome, Opera, Ms Edge) и Firefox. Работать в них начинает только в случае, если stdDeviation поставить в значении выше 0.7.
...
3
голоса
1
ответ
43
показа
SVG: несколько эффектов в одном фильтре
Я пытаюсь реализовать несколько теней в одном фильтре SVG, но я считаю, что мой вопрос более общий, чем этот, а именно, - как добавить несколько эффектов в один фильтр SVG? В моем случае это именно то,...
3
голоса
3
ответа
106
показов
Как можно создатьCSS clip-path в виде флага?
Подскажите, пожалуйста, как можно создать clip-path (ну или любую другую маску) по форме флажка ?
Не знаю как этот синусоидальный обвод сделать, что б он и сверху и снизу совпадал.
body {
...
1
голос
1
ответ
29
показов
Фильтр SVG: шириной 100% высотой 100% не полностью обрабатывает изображение
У меня есть простой фильтр SVG. Если вы щелкните на примере ниже, этот фильтр появится / исчезнет:
var image = document.querySelector('image');
var url = 'https://i.picsum.photos/id/202/200/200....
4
голоса
1
ответ
46
показов
Тень SVG изображения отбрасывается вверх
Есть элемент, выполненный на SVG, нужно чтобы он отбрасывал тень наверх, как на изображение ниже:
Пробовал реализовать изображением и при помощи filter: drop-shadow() - результат не тот..
<svg ...
2
голоса
2
ответа
850
показов
Как убрать рамку/тень у кнопки?
Придал кнопке немного объема, но мешает эта тень(или рамка).
Как её можно убрать?
Использую Firefox
button{
outline: none;
background: none;
cursor: pointer;
}
.category-...
3
голоса
1
ответ
67
показов
SVG - текст с цветом фона и закругленными borders
Можно ли сделать такое с pure SVG, как на изображении?
Без Javascript, фиксированных размеров или HTML.
Я пытался использовать прямоугольный элемент, но это не гибкое решение.
Также я пытался ...
6
голосов
2
ответа
334
показа
Как я могу объединить две фигуры в SVG?
У меня есть две формы: круг и прямоугольник. Хочу превратить их в одну фигуру. Есть ли способы сделать это в коде SVG?
<svg width="400" height="400">
<defs>
<g id=...
0
голосов
1
ответ
47
показов
Как убрать ограничение размера SVG объекта от размытия?
Есть размытый SVG объект, но если его размыть достадочно сильно, что-то не даёт ему размываться дальше, и обрезает часть.
.circle{
fill: #0adaf5;
}
<?xml-stylesheet type="text/css" ...
2
голоса
1
ответ
1k
показов
И за чего SVG не отображается нормально на iphone?
Добрый день есть такой код SVG
<svg width="358" height="358" viewBox="0 0 358 358" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d)">
<path d="M318 ...
4
голоса
1
ответ
98
показов
SVG свет и тень, вызывающие 3D ощущения
Я хочу сделать SVG похожим на 3D, добавив небольшой свет в верхней и левой границе и тень в нижней и правой границе.
что-то вроде этого:
#div1 {
background: #ddd;
}
#div1, #div2, #div3 {
...
3
голоса
1
ответ
62
показа
Фильтр feComposite не работает
<svg width='400' height='400' viewBox='0 0 400 400' style='border: 1px solid black;';>
<filter id="myFilter" filterUnits="userSpaceOnUse"
x="10" y="10" width="186" height="200"&...
4
голоса
1
ответ
74
показа
Как добавить фильтр только к <image /> внутри SVG, но не ко всему SVG
У меня небольшая проблема со стилизацией SVG и изображением внутри. В SVG у меня есть два фильтра.
Первый фильтр #innershadow применяется ко всему объекту SVG.
Второй фильтр я хочу применить только к ...
2
голоса
2
ответа
124
показа
Есть ли способ использовать SVG-градиент в качестве входных данных для фильтра feDisplacementMap?
Я пытаюсь сгенерировать градиент, который я мог бы использовать в качестве входных данных для фильтра feDisplacementMap для искажения текста в SVG. Как мне это реализовать?
Я пытался создать его, как ...
3
голоса
1
ответ
250
показов
SVG shadow не появляется
SVG, с которым я работаю, имеет тень, сделанную с помощью фильтра feGaussianBlur.
Сама тень по бокам отображается правильно, но сверху и снизу обрезается.
Вот так:
Ниже код этой ...
2
голоса
4
ответа
206
показов
Как сверстать адаптивную рамку над фоном с градиентом?
Изображения использовать нельзя. Рамка должна быть резиновой. Проблема в том, что она располагается над фоном с градиентом, и получается так, что уголок снизу отличается цветом, если использовать ...