Описание тега clip-path

Свойство CSS, которое позволяет указать конкретную область отображаемого объекта.
1 ответ

Как установить пользовательский фон с помощью свойства CSS clip-path?

Я борюсь с clip-path свойство для создания абстрактного фона, и я не хочу использовать файл изображения или SVG, я пытался с этим свойством, но я не могу достичь этого результата: введите описание изображения здесь мой основной код: .bg{ height: 100…
01 сен '18 в 03:16
1 ответ

Проблема субпиксельного рендеринга в Chrome с использованием clip-path

У меня есть кнопка с угловыми углами на правой стороне, чего я достиг, используя clip-path и псевдоселектор: after. Вот как это работает: a { height:40px; line-height:40px; color:#fff; background:red; display:inline-block; padding:0 10px; position:r…
11 окт '17 в 16:11
2 ответа

Клип-речевой пузырь с прозрачным фоном содержимого

Я создал речевой пузырь-клип с границей (очень важно). Теперь я пытаюсь сделать фон содержимого прозрачным. Вот мое текущее решение: .background { background: url(https://thumbs.dreamstime.com/b/birch-forest-sunny-day-green-woods-summer-spring-lands…
09 май '18 в 15:15
0 ответов

Используйте SVG Clippath для изменения цвета логотипа в определенных разделах

Для моего нового портфолио я хотел бы использовать логотип SVG, который изменится, когда он достигнет определенного раздела моего сайта. Я нашел этот пост ( Fluid colorchange svg в разных разделах), но это еще не то, что я ищу. Когда логотип достига…
08 май '18 в 13:49
0 ответов

Понимание element.clipPath реакции-native-svg

Я пытался понять, как clipPath работает в Reaction-native-SVG. Вот метод визуализации компонента, чтобы проиллюстрировать мое недоразумение... и я не могу его переварить: render() { return ( <View style={{ flex: 1, backgroundColor: "#fa0" }}> …
10 авг '18 в 13:25
1 ответ

Отзывчивый svg clipPath с фоновым изображением

Мне нужно применить SVG в качестве обтравочного контура для контейнера с повторяющимся фоновым изображением. В этом случае эффект будет означать текстурированный фон для фрагмента текста SVG. Мне удалось заставить это работать со следующими; <div…
02 авг '16 в 09:54
1 ответ

Как использовать фильтр: размытие с клип-пути?

Я пытаюсь добавить тень к clip-path шестиугольник. Так как обычный box-shadow (а также filter:drop-shadow()) не будет работать с clip-path, я пытаюсь подделать эффект с большим псевдоэлементом внизу. Подход взят здесь и прекрасно работает в простом …
2 ответа

CSS - Как размыть маску SVG?

Я безуспешно пытался размыть путь SVG-клипа. Я пробовал разные решения, но ни одно не помогло. Я не уверен, есть ли другое решение, кроме filter, ПСЕВДОКОД Клип-путь SVG должен раскрыть текст ниже Края, если SVG должен быть размытым Заранее спасибо.…
11 дек '18 в 09:21
1 ответ

Круг clipPath не наследует правильную позицию в Firefox

Я использую круговой путь отсечения для моих узлов (в d3.js) следующим образом: <g class="node" id="140" transform="translate(392.3261241288836,64.3699106556645)"> <image class="mainImage" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:hr…
03 окт '15 в 09:35
2 ответа

Текст поверх клипа

Это моя обложка Что мне нужно, так это чтобы белые буквы текли по пути клипа, который я пробовал z-index, но это не работает Вот мой код: .header { height: 85vh; background-image: linear-gradient( to right bottom, rgba(255,255,255, 0.8), rgba(0,0,0…
27 дек '18 в 18:48
1 ответ

Как применить clipPath к div с позицией clipPath относительно позиции div

Не уверен, правильно ли я сформулировал название, но здесь возникает вопрос. У меня есть SVG-путь облачной формы, который я хотел бы использовать в CSS с clip-path имущество. <path d="M46.9819755,61.8637972 C42.0075109,66.8848566 35.0759468,70 27…
07 апр '15 в 15:57
1 ответ

Обрезать многоугольник над другим

В моем коде CSS я использую 2 пути клипа polygon(), но второе, находящееся под первым, не будет привязано к левому нижнему углу первого элемента div. Вот скриншот... ... и мой код: CSS .container1 { z-index: 1; background-image: url('/assets/images/…
14 май '17 в 14:27
1 ответ

Наклон продолжает течь при изменении размера браузера (используется clip-path)

Я делаю маску, которая имеет уклон, покрывает половину экрана. Но когда я изменяю размер браузера, часть наклона перетекает в левую сторону, и угол меняется следующим образом. Вот в чем разница. // Перед изменением размера // После изменения размера…
21 ноя '18 в 23:20
0 ответов

Путь клипа не работает с svg и d3

Я пытаюсь сделать точечный заговор с. Масштабирование, кажется, работает, но точки, распространяющиеся от оси, - это то, чего я не хочу. Я некоторое время гуглил и не мог решить свою проблему. Я уже попробовал решение, опубликованное в этом посте, н…
29 ноя '15 в 08:59
0 ответов

Маска /Clip-Path Div с детьми?

Итак, у меня есть эта скрипка https://jsfiddle.net/OMGDrAcutla/24kbw8mq/1/ Желаемый эффект довольно близок. Моя конечная игра заключается в следующем. Изображение для справки Кажется, что SVG clipPath не работает. То, что я хочу сделать, это огранич…
29 мар '17 в 00:43
7 ответов

Клип путь вставки круга?

Можно ли создать врезанную траекторию обрезки по кругу, чтобы траектория обрезки эффективно прорезала отверстие в элементе div в центре, а не только показывала центр? Div должен быть показан отдельно от отверстия, вырезанного в центре, чтобы создать…
03 май '16 в 09:34
1 ответ

Не могу повернуть 3d элемент с родительским отсеченным путем

Возможно ли повернуть (rotateX или rotateY) элемент, даже если родительский объект маскирован (путь клипа)? Как это: HTML <div class="holder"> <div class="square"></div> </div> CSS .holder{ -webkit-clip-path: polygon(0px 60%,…
21 июл '15 в 22:46
1 ответ

clipPath или клип-путь Internet Explorer

Любая версия IE это круто... 11+ было бы достаточно... http://codepen.io/dapinitial/pen/86857208c985a895aeea87cfd40a0b2e <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="0" width="0"> &lt…
06 май '16 в 22:42
1 ответ

SVG-путь к клипам не работает - несколько svgs на одной странице

У меня есть несколько svgs на одной странице, и я экспортировал их по отдельности из иллюстратора. Я также пропустил их через omgsvg, что уменьшило размер файла. Однако, когда я просматриваю полную страницу со всеми моими отдельными вставленными svg…
22 июн '17 в 21:00
1 ответ

SVG clipPath проблема

У меня есть тег SVG с двумя элементами круга внутри, которые совпадают друг с другом. с теми же X, Y и R. но когда я помещу один из них в clipPath и свяжу его с изображением или div, положение обрезанного круга изменится. в чем проблема? Был бы приз…
17 июн '16 в 10:20