Вопросы по теме 'clip-path'
Путь клипа SVG не работает с внешним объектом в Chrome
Я пытаюсь получить видеомаску некоторого текста, наложенную поверх другого экземпляра видео. Я добился желаемого эффекта в FF:
Наложение текста, маскирующее экземпляр того же видео, поверх которого оно наложено. Для этого я использовал...
851 просмотров
schedule
06.08.2022
Гистограмма цвета заливки кисти d3.js
я создал гистограмму с d3.js . Мне удалось изменить цвет заливки rect в зависимости от положения brush . Но я хотел бы изменить цвет внутри rect . Например, если brush start находится посередине rect , я бы хотел, чтобы мой rect был...
2395 просмотров
schedule
02.07.2023
Как заставить клип-путь SVG правильно работать в Google Chrome?
Я использую встроенный SVG вместе со свойством CSS clip-path для создания скошенного угла элемента div .
В Firefox размер скошенного угла правильный. Однако в Google Chrome не только размер скошенного угла неправильно меньше, но и размер...
3549 просмотров
schedule
25.09.2022
CSS - Clip path svg не работает в Firefox
Я пытаюсь использовать clip path, но это не работает в Firefox. Я уже искал об этом и нашел этот код в переполнении стека. У меня реализовано несколько фигур, но это просто работа в хроме и сафари.
.shape
{
width: 300px;
height:...
958 просмотров
schedule
29.12.2022
CSS-анимация следующего и предыдущего клипа
Следуя связанному вопросу , который я разместил на прошлой неделе, я создал пользовательскую карусель который использует clip-path для предоставления фрагмента следующего и предыдущего слайдов. В настоящее время это работает функционально, но...
544 просмотров
schedule
19.12.2022
Достижение диагонально-нарезанного макета, в котором элементы div располагаются бок о бок
Я пытаюсь добиться такой диагональной компоновки -
И я наткнулся на https://bennettfeely.com/clippy/ , который идеально подходит, поскольку я могу использовать clip-path: polygon создает мою фигуру, единственное, что поддержка у него не...
427 просмотров
schedule
14.03.2023
Можно ли заполнить цвет фона, чтобы не было белого? Я использую свойство css clip-path на этом снимке экрана.
https://imgur.com/a/ZTZp4
Codepen: https://codepen.io/yongelee/pen/eVobRd
Я хочу, чтобы фон не был белым, поэтому в основном это белое пространство является цветом фона следующего блока. Но, к сожалению, когда я обрезаю путь, div не...
5232 просмотров
schedule
02.11.2022
CSS svg hover анимация/переход
я использую клип-путь svg в качестве маски для изображения. Теперь мне нужна внутренняя граница внутри него при наведении. Поэтому я сделал второй клип-путь для наведения, но переход на него не влияет.
Я хочу, чтобы граница шла по бокам...
245 просмотров
schedule
26.12.2022
CSS clip-path с использованием всего SVG
Я пытаюсь использовать свойство clip-path в css, чтобы замаскировать размытое изображение в сетке, в основном, чтобы получить эффект размытия стекла, который вы видите, например, в Windows 10, а также в других местах.
Структура, которая у меня...
62 просмотров
schedule
06.11.2023
Clip-path в Chrome оставляет странную линию на краю
Я использую clip-path , чтобы создать особую форму синей кнопки поиска.
В Chrome вы видите странную полосу у края выреза, а в Firefox все в порядке.
Я не первый, кто указывает на это, но я не нашел решения.
Хром
Файрфокс...
1264 просмотров
schedule
10.02.2023
Лучшая практика для хранения путей SVG для пути клипа CSS?
Я экспериментировал с контурами SVG, которые использую для обрезки CSS. Наконец-то я освоился. Я создаю графику с помощью Adobe Illustrator, затем помещаю SVG в HTML с шириной и высотой 0, оборачиваю путь знаком <clipPath> и назначаю ему...
450 просмотров
schedule
13.06.2023
Повторение шаблона SVG в качестве пути клипа для границы с использованием псевдоэлемента ::after
Я пытаюсь создать асимметричный пилообразный узор в нижней части заголовка сайта, который выглядит следующим образом (за исключением того, что пилообразный рисунок будет асимметричным):
пример пилообразной границы
Я пробовал некоторые чистые...
1085 просмотров
schedule
09.09.2022
Преобразование пути клипа CSS со смешанными (фиксированными и процентными) значениями в путь клипа SVG
У меня есть изображение карты с градиентом с обрезанным углом, используя clip-path :
.card {
width: 200px;
height: 200px;
background: linear-gradient(to bottom, blue, green);
clip-path: polygon(20px 0, 100% 0, 100% 100%, 0...
1867 просмотров
schedule
18.10.2022
Как я могу применить clipPath в SVG с несколькими путями и НЕ вырезать область между путями?
У меня есть clipPath SVG, состоящий из нескольких элементов пути, которые мне нужно применить к группе элементов. Я хочу вырезать только область под самим контуром, а не между контурами. (пример, который не делает то, что я хочу, следует)
var...
655 просмотров
schedule
30.03.2022
Как обрезать изображение с помощью фигур SVG?
Кто-нибудь может подсказать мне, как сделать путь клипа изображения CSS с уникальными формами SVG? Некоторые люди предлагали сторонний плагин, такой как SVG Injector и все такое. Кто-нибудь может помочь мне, как выполнить эту задачу, которая будет...
4632 просмотров
schedule
12.11.2022
Производственная сборка React отличается от разработки | полифилл не запускается
Я запустил npx create-react-app . и импортировал clip-path вручную. Разработочная сборка работает без проблем, а производственная, похоже, не работает. Проблема одинакова в IE11 и Edge44.
Действия по воспроизведению:
npx...
233 просмотров
schedule
03.08.2022
Как отключить функцию CSS «преобразование: перевод» для Internet Explorer?
Я настроил разделенную анимацию для логотипа ниже, используя функции клип-пути и преобразования при наведении с помощью CSS. Однако clip-path не поддерживается в IE ad Edge. Поэтому я хотел бы отключить «преобразование: перевод» при использовании IE...
66 просмотров
schedule
21.09.2022
Как анимировать пользовательский SVG с путем клипа и смещением тире?
Я пытаюсь анимировать SVG, чтобы он отображался на экране, используя метод, описанный в этот ответ с использованием clippath и dashoffset. Желаемым результатом будет эффект, аналогичный этой codepen . У меня есть два SVG, один из которых я...
122 просмотров
schedule
15.06.2023
SVG Clip-Path на изображении не работает на iOS
У меня проблема с элементом SVG, содержащим многоугольники, изображения и пути клипа на устройствах IOS. Мой код хорошо работает в Windows и Android, но в iPhone изображение не появляется. Я могу SVG, другие элементы (линии), но мое изображение не...
267 просмотров
schedule
31.07.2022
Невозможно выполнить переход или анимировать css clip-path
Это работает именно так, как ожидалось, потому что svg превращается из нарвала в сову.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<svg viewBox="0 0 300 200"...
217 просмотров
schedule
06.07.2023
