Маска изображения в Safari SVG не изменяется с помощью CSS - PullRequest
Новая
       44

Маска изображения в Safari SVG не изменяется с помощью CSS

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

Я пытаюсь изменить размер изображения SVG с помощью маски с помощью CSS. Проблема, с которой я сталкиваюсь, связана с Safari, поскольку он не позволяет классам CSS переопределять значения по умолчанию. Вот встроенный код SVG: 

<svg width="48" height="48" class="icon green">
<defs>
  <mask id="svgmask-947">
    <image class="svg-image" width="48" height="48" href="/themes/custom/assets/media/images/fa-png/campus.png"></image>
  </mask>
</defs>
<rect class="icon-mask" mask="url(#svgmask-947)" width="48" height="48" y="0" x="0"></rect>

Размер SVG не изменится, если я просто применю к нему любой класс с новой шириной / высотой в CSS. Вот пример CSS: 

 .icon, rect, mask image {
   width:24px;
   height: 24px;
}

Применение CSS во всех других браузерах работает, только не в Safari.

Спасибо за понимание и помощь.

Ответы [ 2 ]

1 голос
/ 04 ноября 2019

Нашел решение, так как мне не хватало атрибута viewbox: 

<svg width="48" height="48" class="icon green" viewBox="0 0 48 48">
<defs>
  <mask id="svgmask-980">
    <image class="svg-image" width="48" height="48" href="/themes/custom/assets/media/images/fa-png/campus.png"></image>
  </mask>
</defs>
<rect class="icon-mask" mask="url(#svgmask-980)" width="48" height="48" y="0" x="0"></rect>

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

Я полагаю, что существует проблема соответствия между Safari и @ media.

Вы пробовали это решение ?

...