SVG Rendering Issue iOS

Question

Я пытаюсь использовать SVG-слойный спрайт, но я столкнулся с странной проблемой рендеринга на мобильном Safari. Я как бы приписываю это раннему усыновлению, но поскольку он оказывает 95% -ное значение, мне было любопытно узнать, может ли кто-нибудь еще иметь решение. Я могу просто использовать PNG или что-то еще.

Обратите внимание, что на iOS только два из этих ящиков имеют это глючное поведение, идущее внизу, где изображения, технически, перекрываются в отрицательном пространстве. Также обратите внимание на то, как изображения отображаются в неправильном порядке. Все сдвинуто вправо.

образец кода, чтобы следовать после примера изображения:

HTML

<li> 
    <a id="email" href="#"> 
     <img src="social-icons.svg#email" width="115" height="128" alt="E-mail" /> 
     </a> 
</li> 
<li> 
    <a id="github" href="#"> 
     <img src="social-icons.svg#github" width="115" height="128" alt="GitHub" /> 
    </a> 
</li> 
... 

SCSS

li 
{ 
    display: inline; 

    &:nth-child(1):after, 
    &:nth-child(3):after 
    { 
     content: ' '; 
     display: block; 
    } 

    @for $i from 1 through 6 
    { 
     &:nth-child(#{$i}) a 
     { 
      @if $i > 1 { top: -30px; } 
      @if $i > 3 { top: -60px; } 
     } 
    } 
    ... 
} 

SVG

<?xml version="1.0" encoding="utf-8"?> 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 

    <svg:style xmlns:svg="http://www.w3.org/2000/svg" type="text/css"> 
     .i { display: none; } 
     .i:target { display: block; } 
    </svg:style> 

    <svg:svg class="i" id="email" width="100%" height="100%" viewBox="0 0 458 512" xmlns:svg="http://www.w3.org/2000/svg"> 
     ... 
    </svg:svg> 

    <svg:svg class="i" id="facebook" width="100%" height="100%" viewBox="0 0 458 512" xmlns:svg="http://www.w3.org/2000/svg"> 
     ... 
    </svg:svg> 
</svg:svg> 

Я только постановка вопроса, потому что, как я уже говорил, это, кажется, работает, с некоторыми незначительными глюки. Почему значки могут отображаться неправильно, а иногда и частично, изображения?

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

Answer 1

Мне удалось решить проблему рендеринга в iOS, изменив исходный код HTML. Вместо того, чтобы использовать элементы img, я переключил их на фактические элементы SVG, и он работает!

Интересно, если бы я только изменил первый, все получилось отлично, но я в конечном итоге переключил их все на ради удобства.

Изменено это:

<li> 
    <a id="email" href="#"> 
     <img src="icons/queue-icons.svg#email" width="115" height="128" alt="E-mail" /> 
    </a> 
</li> 

Для этого:

<li> 
    <a id="email" href="#"> 
     <svg viewBox="0 0 115 128"> 
      <use xlink:href="/icons/queue-icons.svg#email"></use> 
     </svg> 
    </a> 
</li> 

Благодаря this article on CSS-Tricks за предоставленную мне некоторую дополнительную информацию.