не может применить тень в IE11 - PullRequest
Новая
       11

не может применить тень в IE11

1 голос
/ 06 марта 2020

как я могу показать в inte rnet explorer 11 ту же самую тень, которую я могу применить в chrome, используя это правило? 

    filter: drop-shadow(6px 6px 7px rgba(0,0,0,0.5));

Это моя рабочая chrome разметка HTML

<div class="cta-image-container">
<div>
    <svg class="svg-cta-image">
        <image filter="url(#dropshadow)" width="640" height="580" class="cta-image cta-image-1-3" xlink:href="https://anekitalia.com/wp-content/uploads/media/justfun-viaggi-evento-viaggia-split.jpg"></image>
    </svg>
</div>
<div>
    <svg class="svg-cta-image">
        <image width="640" height="580" class="cta-image cta-image-2-3" xlink:href="https://anekitalia.com/wp-content/uploads/media/justfun-viaggi-evento-viaggia-split.jpg"></image>
    </svg>
</div>
<div>
    <svg class="svg-cta-image">
        <image width="640" height="580" class="cta-image cta-image-3-3" xlink:href="https://anekitalia.com/wp-content/uploads/media/justfun-viaggi-evento-viaggia-split.jpg"></image>
    </svg>
</div>
<svg>
    <defs>
        <clipPath id="split-1-3">
            <polygon points="222,580 0,580 0.12,0 176,0"></polygon>
        </clipPath>
    </defs>
</svg>
<svg>
    <defs>
        <clipPath id="split-2-3">
            <polygon points="400,0 196,0 242,580 446,580"></polygon>
        </clipPath>
    </defs>
</svg>
<svg>
    <defs>
        <clipPath id="split-3-3">
            <polygon points="640,0 420,0 466,580 640,580"></polygon>
        </clipPath>
    </defs>
</svg>

и это CSS

.cta-image-container svg{
    position: absolute;
}
.cta-image-container {
    width: 640px;
    height: 580px;
    margin: 0 25px 0 25px;
    filter: drop-shadow(6px 6px 7px rgba(0,0,0,0.5));
    position: relative;
}
.cta-image {
    max-width: 100%;
    max-height: 100%;
    position: absolute;
}
.svg-cta-image {
    width: 640px;
    height: 580px;
}
.cta-image-1-3 {
clip-path: url(#split-1-3);
}
.cta-image-2-3 {
clip-path: url(#split-2-3);
}
.cta-image-3-3 {
clip-path: url(#split-3-3);
}

Здесь вы можете найти chrome рабочий CODEPEN

1 Ответ

1 голос
/ 07 марта 2020

Как указано rx2347 , IE не поддерживает CSS Эффекты фильтра

Таким образом, единственный способ добавить тень - применить эффект внутри вашего SVG с помощью размытого черного многоугольника, расположенного за изображением.

Это обновленная версия вашего кодекса с примененным эффектом https://codepen.io/samwalker/pen/XWbzpZX

Я не у меня не было ПК / IE 11, поэтому я использовал BrowserStack для тестирования и результаты ниже: Screenshot of Windows 8.1 ie 11 Примечания:

1. Мне пришлось увеличить размер viewbox / svg, чтобы тень не была обрезана

<svg class="svg-cta-image" viewBox="0 0 660 600">

2. Создание feGaussianBlur в качестве фильтра svg def. 

<filter id="blurFilter">
    <feGaussianBlur stdDeviation="5" />
<filter />

'Размер размытия' устанавливается атрибутом stdDeviation.

Хороший инструмент для демонстрации того, что возможно с IE фильтрами: Практическое руководство: SVG-фильтр Эффекты Он входит в Azure веб-сайтов и показывает MS IE совместимые фильтры

3. Создан элемент группы внутри SVG той же формы, что и путь клипа, это наша 'тень' 

 <g id="shadow" fill="black" filter="url(#blurFilter)" fill-opacity="0.5">
    <polygon points="222,580 10,580 10,10 176,10"></polygon>
    <polygon points="400,10 196,10 242,580 446,580"></polygon>
    <polygon points="640,10 420,10 466,580 640,580"></polygon>
 </g>

Стиль тени задается с помощью fill color и fill-opacity.

Мне пришлось сместить начальные точки многоугольника на 10px, чтобы соответствовать новой позиции изображения.

4. Объедините 3 polygons в один обтравочный контур, чтобы загрузить изображение только один раз. Если вы собираетесь использовать 3 разных изображения, вы можете легко изменить это обратно.

5. Сместить изображение с края поля svg и сбросить его размер x="10" y="10" width="640" height="580" Возможно, вы захотите сделать это в css.

Возможно, вы захотите внести некоторые изменения, но, надеюсь, это приведет вас на правильный путь.

Полная разметка ниже: 

.cta-image-container {
  width: 660px;
  height: 600px;
  margin: 25px auto;
  position: relative;
}
<div class="cta-image-container">
  <div>
    <svg class="svg-cta-image" viewBox="0 0 660 600"><!-- increased veiwbox by 20px so shadow isn’t clipped -->
      <defs xmlns="http://www.w3.org/2000/svg">
        <clipPath id="split-in-3"><!-- combined clipping path -->
          <polygon points="222,580 0,580 0.12,0 176,0"></polygon>
          <polygon points="400,0 196,0 242,580 446,580"></polygon>
          <polygon points="640,0 420,0 466,580 640,580"></polygon>
        </clipPath>
        <filter id="blurFilter">
          <feGaussianBlur stdDeviation="5" /><!-- size of shadow -->
        <filter />
      </defs>
      <g id="shadow" fill="black" filter="url(#blurFilter)" fill-opacity="0.5"><!-- `fill` & `fill-opacity` set the shadow’s color -->
        <polygon points="222,580 10,580 10,10 176,10"></polygon><!--`0`s replaced by 10 to offset shadow from edge of svg -->
        <polygon points="400,10 196,10 242,580 446,580"></polygon>
        <polygon points="640,10 420,10 466,580 640,580"></polygon>
      </g>
            
      <image clip-path="url(#split-in-3)" x="10" y="10" width="640" height="580" class="cta-image cta-image-1-3" xlink:href="https://anekitalia.com/wp-content/uploads/media/justfun-viaggi-evento-viaggia-split.jpg"></image><!-- positioned at 10px `x` & `y` to offset from edge of svg --><!-- reset size to match original -->
            
    </svg>
  </div>
</div>
...