Изображения внутри не отображаются в старых версиях браузера Mozilla

Question

На старых версиях mozilla изображения внутри тега pattern не отображаются. Как заставить браузер это делать? Имеется примерно такой html на странице:

svg {
  height: 100%;
  width: 100%;
}

.example {
  height: 100%;
  width: 100%;
  fill: transparent;
  stroke: #000;
}

.example a {
  transition: all 0s linear;
}

.barbara {
  fill: url(#barbara);
}

<div class="example">
  <svg version="1.1" 
       width="1425" 
       height="1267" 
       viewBox="0 0 1425 1267" 
       baseProfile="full" 
       xmlns="http://www.w3.org/2000/svg" 
       xmlns:xlink="http://www.w3.org/1999/xlink" 
       xmlns:ev="http://www.w3.org/2001/xml-events">
    <g class="barbara">
      <a xlink:href="example.com">
        <path d="M2652,2652H0V0H2652Z"/>
      </a>
    </g>
    <pattern id="barbara" patternUnits="userSpaceOnUse" width="1425" height="1267" viewbox="0 0 1425 1267">
      <image xlink:href="barbara.png" width="1425" height="1267" />
    </pattern>
  </svg>
</div>

В опере и хромиумах все отображается корректно, внутри path отображаются png-изображения, а mozilla (и я подозреваю, что safari тоже) не может их обработать. Я понимаю, что надо помочь браузеру понять, что там есть изображения и их надо обработать, но не знаю как, и гугление не помогает. Подскажите, пожалуйста. Я понимаю, что mozilla обновляется автоматически, но есть множество людей, которые используют старые версии по той или иной причине. Хотелось бы чтобы для них все выглядело так же.

Answer 1

Попробуйте добавить единицы измерения, например px в размеры изображения

<image xlink:href="https://i.stack.imgur.com/WHYc7.jpg" width="1425px" height="1267px" />

Для изображений, многие старые версии браузеров не понимают в чем указаны размеры: в процентах, относительных или абсолютных единицах измерения, если указаны только цифры и поэтому не рендерят изображение.

svg {
  height: 100%;
  width: 100%;
}

.example {
  height: 100%;
  width: 100%;
  fill: transparent;
  stroke: #000;
}

.example a {
  transition: all 0s linear;
}

.barbara {
  fill: url(#barbara);
}

<div class="example">
  <svg version="1.1" 
       width="1425" 
       height="1267" 
       viewBox="0 0 1425 1267" 
       baseProfile="full" 
       xmlns="http://www.w3.org/2000/svg" 
       xmlns:xlink="http://www.w3.org/1999/xlink" 
       xmlns:ev="http://www.w3.org/2001/xml-events">
    <g class="barbara">
      <a xlink:href="example.com">
        <path d="M2652,2652H0V0H2652Z"/>
      </a>
    </g>
    <pattern id="barbara" patternUnits="userSpaceOnUse" width="1425" height="1267" viewbox="0 0 1425 1267">
      <image xlink:href="https://i.stack.imgur.com/WHYc7.jpg"  width="1425px" height="1267px" />
    </pattern>
  </svg>
</div>

Ещё один нюанс, но это уже касается ссылок
(Это дополнительная информация)

Готовится к выходу версия SVG2, где xlink:href объявлено depricate (устаревшим, нежелательным) и предлагается заменить ссылки, как в HTML на обычные ссылки href Но safari не понимает такой формы записи, так как новый стандарт ещё не внедрён. Но новые версии Chrome и Firefox уже внедрили href

Что же нужно сделать, чтобы приложение было кроссбраузерным?
В литературе и на практике предлагается указывать одновременно обе записи, для одних браузеров сработает новая запись href для других старая запись xlink :href

 <image xlink:href="https://i.stack.imgur.com/WHYc7.jpg" href="https://i.stack.imgur.com/WHYc7.jpg" 
 width="1425px" height="1267px" />

svg {
  height: 100%;
  width: 100%;
}

.example {
  height: 100%;
  width: 100%;
  fill: transparent;
  stroke: #000;
}

.example a {
  transition: all 0s linear;
}

.barbara {
  fill: url(#barbara);
}

<div class="example">
  <svg version="1.1" 
       width="1425" 
       height="1267" 
       viewBox="0 0 1425 1267" 
       baseProfile="full" 
       xmlns="http://www.w3.org/2000/svg" 
       xmlns:xlink="http://www.w3.org/1999/xlink" 
       xmlns:ev="http://www.w3.org/2001/xml-events">
    <g class="barbara">
      <a xlink:href="example.com">
        <path d="M2652,2652H0V0H2652Z"/>
      </a>
    </g>
    <pattern id="barbara" patternUnits="userSpaceOnUse" width="1425" height="1267" viewbox="0 0 1425 1267">
      <image xlink:href="https://i.stack.imgur.com/WHYc7.jpg" href="https://i.stack.imgur.com/WHYc7.jpg" width="1425px" height="1267px" />
    </pattern>
  </svg>
</div>

БЛОГ НА HUSL

Изображения внутри не отображаются в старых версиях браузера Mozilla

Ответы (1 шт):