Не удалось заставить отзывчивую маску изображения SVG работать в Firefox

Я пытаюсь замаскировать изображение в Firefox с помощью SVG. Изображение отзывчивое, поэтому маска тоже должна быть отзывчивой.

С простой круговой маской SVG и атрибутами maskUnits="objectBoundingBox" и maskContentUnits="objectBoundingBox" маска SVG работает, как и ожидалось. См. эту скрипту.

Но когда я экспортирую свой путь из Illustrator и включаю его так же, как простую маску круга SVG, он не работает. Когда я удаляю атрибуты maskUnits="objectBoundingBox" и maskContentUnits="objectBoundingBox", изображение маскируется, но не реагирует. См. эту скрипту.

Я пытаюсь включить атрибут viewbox, с которым работает Illustrator, чтобы вернуть отзывчивость, но это не сработает.

Кто-нибудь знает, как заставить работать эту адаптивную маску изображения SVG?

Я использую текущий Firefox 45.0.2 на OSX. Благодарю вас!


svg css responsive firefox
person Thomas    schedule 26.04.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

попробуйте эту скрипту, хотя я тестировал свой калькулятор только на SVG в квадрате ( высота = ширина), но когда я попробовал максимальное значение размера в вашем случае 800 пикселей, это сработало хорошо.

HTML:

<svg height="0" viewBox="0 0 800 500">
  <mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
    <path d="M0,0.05C0.03375,0.03,0.08625,0.00625,0.15125,0.0025,0.25375-0.0025,0.27375,0.04625,0.3775,0.04875c0.12125,0.0025,0.15-0.065,0.25375-0.0425,0.06125,0.0125,0.0675,0.04125,0.12625,0.055C0.84625,0.08375,0.9325,0.0425,0.99875,0V0.625L0,0.625V0.05Z" style="fill:white"/>
  </mask>
</svg>
<img src="https://placebear.com/800/500" id="test" alt="">

CSS:

#test { width: 100%; height: auto; mask: url(#m1); }

Пожалуйста, дайте мне знать, если у вас есть какие-либо проблемы.

person ProllyGeek    schedule 01.05.2016
comment
Спасибо, ProllyGeek. Этот тестовый пример хорошо работает с вашим калькулятором. Но это не работает, когда я использую более сложную маску (в пути SVG есть несколько NaN), даже когда я использую SVG в квадрате. Это исходная маска, есть ли возможность прогнать через калькулятор? - person Thomas; 02.05.2016
comment
@Thomasz Интересно, я поработаю над этой ошибкой и, надеюсь, исправлю ее, может быть, мне следует загрузить код на github и попросить людей помочь с этим. - person ProllyGeek; 02.05.2016
comment
У вас есть новости по этому поводу? Я думаю, что вы спасете жизни с помощью своего калькулятора, когда возьмете его на работу! Спасибо за все ваши усилия. - person Thomas; 06.05.2016
comment
@Thomasz, это была очень напряженная неделя, но я поработаю над этим, как только наступят выходные, не беспокойтесь :) Удачи. - person ProllyGeek; 06.05.2016