Вопросы по теме 'clip-path'
Адаптивный svg clipPath с фоновым изображением
Мне нужно применить SVG в качестве обтравочного контура к контейнеру с повторяющимся фоновым изображением. В данном случае эффект будет означать текстурированный фон для части текста SVG.
Мне удалось заставить это работать со следующим:...
556 просмотров
schedule
07.09.2021
Использование встроенного SVG внутри клипа SVG
Попытка создать маску для изображения с помощью SVG. Маска создается из прямоугольника со скругленными углами и кончика в правом верхнем углу.
Я создаю все это только в SVG, но я не могу правильно обрезать кончик маски. Кажется, вы не можете...
849 просмотров
schedule
17.10.2021
создать плавную кривую в clip-path: polygon
У меня есть элемент div, в который я хочу добавить внутреннюю кривую, используя путь обрезки: polygon css ...
Я получил базовую форму, но не смог сгладить кривую.
HTML:
<div id="clip_element">
</div>
CSS:...
2987 просмотров
schedule
05.10.2021
Шестиугольная сетка с рамкой и изображением
Я пытаюсь добиться изображения ниже:
Я могу сделать границу и текст шестиугольника, но я понятия не имею, как добавить изображение шестиугольника и сделать сетку из трех шестиугольников.
Любая помощь будет высоко оценена. Если есть более...
97 просмотров
schedule
29.09.2021
Любой способ реплицировать -webkit-mask-complex: destination-atop в Chrome и / или Firefox?
Моя цель - иметь возможность использовать альфа-маску PNG для создания неровных краев внизу разделов / строк / контейнеров на веб-сайте.
Поскольку строки могут быть любой высоты, мне нужно применить тонкое изображение маски вдоль только одного края...
12 просмотров
schedule
16.09.2021
Маскировка формы CSS с изображением
Можно ли с помощью этого изображения замаскировать формы div?
Это то, чего я пытаюсь достичь:
Это то, что я сделал до сих пор, используя тег SVG. Но это не дает мне точного результата:
Код
<svg viewBox="0 0 643 525">...
370 просмотров
schedule
01.04.2022
Срезанный угол в div с изображением, установленным на 100% высоты и ширины
Это в основном то, чего я хочу достичь --> https://jsfiddle.net/tak1pyt7/1/
.clip {
width: 500px;
height: 500px;
-webkit-clip-path: polygon(100% 0, 100% 81%, 82% 100%, 0 100%, 0 0);
clip-path: polygon(100% 0, 100% 81%, 82%...
1530 просмотров
schedule
05.05.2022
Текст svg с clip-path не обрезается должным образом?
У нас возникла проблема с применением clipPath к текстовому элементу в svg ниже.
<!DOCTYPE html>
<html>
<head>
<title>Svg clipping issue</title>
</head>
<body>
<div...
1064 просмотров
schedule
13.06.2022
clip-path не работает с хромом
У меня проблема с clip-path в Chrome. Firefox не имеет проблем и правильно показывает эту html-страницу, но хром ничего не показывает.
img {
-webkit-clip-path: url(#clipping);
clip-path: url(#clipping);
}...
5761 просмотров
schedule
23.06.2022
URL-адрес клипа CSS SVG не работает в Firefox
Я подписался на jsfiddle и добавил коды в свой проект. Все хорошо, но в файрфоксе все не так и клип не работает.
<svg class="clip-svg">
<defs>
<clipPath id="test-clip"...
1047 просмотров
schedule
28.06.2022
clip-path с видео html
У меня проблема со свойством clip-path с тегом видео в браузере Safari. В хроме и фаерфоксе клип-путь с видео работает нормально. На самом деле Saffary должен его поддерживать, возможно, в моем коде есть какие-то другие ошибки. Пожалуйста,...
168 просмотров
schedule
03.08.2022
css clip path Форма не работает, т.е. или как я могу создать это с помощью css
Я хочу обрезать изображение в соответствии с фигурой, как показано ниже. Но мой код не работает в IE. Как заставить его работать в IE?
.svg-image {
background:...
6951 просмотров
schedule
11.08.2022
Несколько путей клипа
Я пытаюсь сделать макет веб-сайта идеально состоящим из нескольких div, где я хотел бы, чтобы каждый из них имел наклонное дно, переходящее в тот, что ниже.
Вот посмотрите на макет до сих пор:
@charset "utf-8";
/* CSS Document */
* {...
1845 просмотров
schedule
27.08.2022
Как скруглить углы при использовании CSS clip-path
Я хочу иметь возможность закруглить 3 крайних левых угла этой фигуры, которую я создал, есть идеи, как это можно сделать?
div {
position: absolute;
z-index: 1;
width: 423px;
height: 90px;
background-color: #b0102d;
color:...
49369 просмотров
schedule
20.01.2023
Как определить путь клипа, который не масштабируется вместе с изображением
Я пытаюсь сформировать многоугольник над некоторыми изображениями, которые есть на моем веб-сайте. Моя проблема в том, что многоугольник не всегда имеет одинаковую ширину и зависит от ширины изображения. Я создал codepen, в котором вы можете увидеть...
1625 просмотров
schedule
10.09.2023
d3.символы обрезаются областью ClipPath
Все еще в процессе повышения моей компетентности в отношении D3, я столкнулся с проблемой, когда я пытаюсь построить масштабируемую кривую в элементе SVG с полями (поэтому мне нужен прямоугольник clipPath, чтобы избежать того, чтобы график вторгался в...
1076 просмотров
schedule
29.03.2023
Как изменить макет силы d3 с полигонами Вороного, чтобы инициировать события для сгруппированных элементов?
Цель состоит в том, чтобы объединить симуляцию силы d3, элементы g и полигоны Вороного, чтобы упростить запуск событий на узлах, таких как перетаскивание, наведение курсора мыши, всплывающие подсказки и т. д., с графиком, который может быть...
1040 просмотров
schedule
28.01.2023
Как использовать SVG clipPathUnits=objectBoundingBox
Я пытаюсь использовать SVG для маскировки изображения.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width=500 height=300>
<defs>
<clipPath id="clip">
<path...
4636 просмотров
schedule
09.01.2023
Как получить правильный размер svg clipPath
У меня проблема с масштабированием моего встроенного SVG, который используется только для clip-path . Вырезанный элемент имеет ширину 150px и высоту 150px . Уже второй день пытаюсь это исправить, но мне хочется бегать по кругу.
В Chrome...
255 просмотров
schedule
01.10.2023
Путь клипа для анимированной линии и круга в d3 js
Как обрезать анимированную линию и окружность вместе с путем?
Для этого примера я также попытался обрезать круг и точки.
Я добавил следующий код:
svg.append("defs")
.append("clipPath")
.attr("id", "clip")...
1753 просмотров
schedule
08.10.2023
