Попытка обойти MS Edge отсутствием поддержки clip-path - PullRequest
Новая
       45

Попытка обойти MS Edge отсутствием поддержки clip-path

0 голосов
/ 21 ноября 2019

Контекст: Edge поддерживает путь клипа только для <svg> элементов.

Это то, что я пробовал. У меня есть <image> в <svg>, и я пытаюсь стилизовать его как фоновое изображение. Вы знаете, фоновое вложение исправлено , фоновое покрытие размера и все такое. Проблема ... как? 

<svg width="100%" height="100%" viewBox="0 0 100 100">
  <defs>
    <clipPath id="highlight-clip-row">
      <polygon points="30 0, 100 0, 100 100, 0 100"/>
    </clipPath>
    <clipPath id="highlight-clip-column">
      <polygon points="0 25, 100 0, 100 100, 0 100"/>
    </clipPath>
  </defs>
  <image id="highlight-image" xlink:href="{{ asset('images/highlight.jpg') }}" height="100%" width="100%"/>
</svg>

Ниже приводится ожидаемый результат (в Firefox) без использования <svg>, который не работает в MS Edge:

Example of expected result

В качестве живого примера этого перейдите на raspberrypi.org . clip-path не будет работать в MS Edge, поскольку он использует простой div с фоновым изображением.

Предполагается, что это изображение будет вести себя как фоновое изображение для div, который является гибким элементом в адаптивном гибком контейнере. .

Я пытался опустить атрибут xlink:href и просто добавить фоновое изображение к его элементу, но на нем ничего не отображается.

Если я сохраню этот элемент <svg>как файл и ссылаться на него как на фоновое изображение для div, как бы я использовал два из этих clipPath элементов?

Если есть другой способ достижения того же эффекта, я был бы рад услышать. Я искал весь день.

1 Ответ

0 голосов
/ 21 ноября 2019

Можете ли вы попробовать это решение с svg в качестве запасного варианта для края? Это будет работать в IE9 и более поздних версиях, а также в Firefox и Chrome 

<svg class="svg-graphic" width="100%" height="100%" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1">
<g>
   <clipPath id="hexagonal-mask">
      <polygon points="30,0 100,0 100,100 0,100" />
   </clipPath>
</g> 
<image clip-path="url(#hexagonal-mask)" height="100%" width="100%" xlink:href="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?cs=srgb&dl=beautiful-beauty-blue-bright-414612.jpg&fm=jpg"/></svg>
...