Как заставить клип-путь SVG правильно работать в Google Chrome?

Я использую встроенный SVG вместе со свойством CSS clip-path для создания скошенного угла элемента div.

В Firefox размер скошенного угла правильный. Однако в Google Chrome не только размер скошенного угла неправильно меньше, но и размер элемента div также становится неправильно меньше.

Вот демонстрация jsFiddle.

Как заставить Google Chrome правильно работать с SVG и clip-path?

P.S. Я знаю, что контент, созданный с помощью CSS, может имитировать эффект скошенного угла. Но в моем случае я должен использовать SVG и clip-path.


svg google-chrome css clip-path
person Ian Y.    schedule 28.08.2016    source источник
comment
У меня есть решение, которое работает в chrome jsfiddle.net/2p3qywad/1. Это не работает в фаерфоксе.   -  person Sam Dawson    schedule 28.08.2016
comment
@SamDawson Спасибо. Я знаю этот чистый метод CSS. Но мне нужен скошенный угол для работы как в Firefox, так и в Chrome, и я пытаюсь использовать самый короткий код.   -  person Ian Y.    schedule 28.08.2016
comment
В хроме квадрат выглядит примерно на 10 пикселей меньше справа и снизу. Я не уверен, почему.   -  person Sam Dawson    schedule 28.08.2016
comment
Похоже, браузеры Webkit неправильно поддерживают эту функцию. См. из">этой темы.   -  person Ian Y.    schedule 28.08.2016

Ответы (2)


arrow_upward
3
arrow_downward

Я нашел решение в этой статье . Решение заключается в добавлении clipPathUnits="objectBoundingBox" к элементу clipPath, а затем изменении значения атрибута points элемента polygon на процентное значение.

Вот обновленная демонстрация jsFiddle.

Предыдущая проблема заключалась в том, что Google Chrome неправильно применяет обтравочный контур к документу вместо HTML-элемента, который на него ссылается. Согласно вышеупомянутой статье, установка значения атрибута clipPathUnits на objectBoundingBox приводит к тому, что путь отсечения учитывает границы элемента HTML, который на него ссылается.

person Ian Y.    schedule 29.08.2016

arrow_upward
3
arrow_downward

Одна вещь, которая помогла мне решить эту проблему, — это добавление уникального идентификатора клипа. Это, наряду с префиксом поставщика для webkit, помогло мне заставить все работать!

Example:

<svg>
     (...normal svg stuff...)

     <clipPath id="uniqueId" transform="translate(-0.01)">
       <rect width="90.96" height="78" style="fill: none"/>
     </clipPath>

     ...other svg stuff...

     <g style="clip-path: url(#uniqueId); -webkit-clip-path: url(#uniqueId);">

 </svg>

Это было для нескольких встроенных svg, и, должно быть, произошло столкновение с созданным Adobe Illustrator идентификатором «clip-path», который был присвоен clipPath.

person cblackmon    schedule 19.04.2017