Svg с изображением внутри не отображается в сафари - программирование

Svg с изображением внутри не отображается в сафари

Внутри моего веб-сайта я вставляю несколько svg. Все они работают отлично в Chrome, Firefox, IE (9+) и в Safari. Howvere, как только изображение, включенное в svg, сафари не отображает изображение.

В соответствии с предыдущей аналогичной темой я пробовал следующее:

SVG <image> элементы, которые не отображаются в Safari - в приложении

 <use>

как этот <use></use>

Изображение SVG не отображается в Safari - Я не считаю это очень полезным, потому что это удаляет aprt svg.

Невозможно отобразить SVG-изображение в Safari - Добавлен

<meta http-equiv="Content-Type" content="application/xhtml+xml"> в заголовке.

И кроме того, я действительно не знаю, что еще попробовать. Возможно, еще одна интересная вещь: внутри моей страницы изображение не отображается, но я могу открыть svg файл в сафари (только файл), и он будет правильно отображаться. Более того, после того, как он открывается в браузере в виде файла, он также отображается внутри страницы. И я вставляю svg на страницу с тегом img.

<img src="mysvg.svg" class="center-block"/>

Это мой svg:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="328px" height="328px" viewBox="0 0 328 328" enable-background="new 0 0 328 328" xml:space="preserve">
<g>
    <defs>
        <polygon id="SVGID_1_" points="1.414,164.001 164,326.586 326.586,164.001 164,1.414      "/>
    </defs>
    <clipPath id="SVGID_2_">
        <use xlink:href="#SVGID_1_"  overflow="visible"></use>
    </clipPath>
    <g id="DSC_x5F_0112-2.psd" clip-path="url(#SVGID_2_)">
        <g id="DSC_x5F_0112-2.psd_1_" enable-background="new    ">

                <image overflow="visible" width="338" height="532" id="DSC_x5F_0112-2" xlink:href="data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAABkAAD/4QNhaHR0cDov
.....SLKPF+7j+acOZPZjmsw4Q0f0L/6k1fu3WFvY/wDEB5o0d7H7/wD7SPFgPzVE54J9/wBI/qez5vei
r/fdeaS//9k=" transform="matrix(0.9818 0 0 0.9818 -2.7197 -11.064)">
            </image>
        </g>
    </g>
</g>
<g>
    <path fill="#FFFFFF" d="M164,328.001L0,164.002L164,0.001l164,164.001L164,328.001z M1.414,164.002L164,326.587l162.586-162.585
        L164,1.415L1.414,164.002z"/>
</g>
</svg>

У меня есть уменьшенная строка изображения base64, чтобы сократить код. Полный svg можно найти здесь.

UPDATE: просто чтобы быть ясным, svg показывает в браузере (сафари), но изображение отсутствует (я вижу только границу).

4b9b3361

ОТВЕТЫ

Ответ 1

Похоже, что эта ошибка WebKit отвечает за проблему: https://bugs.webkit.org/show_bug.cgi?id=99677

Обходной путь, который мы используем в нашем приложении, состоит в том, чтобы иметь script, который находит все элементы img, отображающие изображения SVG, и добавляет скрытые элементы object, загружая одни и те же SVG (<object style="position: fixed; width: 0; height: 0;" data="image.svg" type="image/svg+xml"></object>).

Причина, по которой он работает, заключается в том, что тег object правильно загружает внедренные изображения в кеш изображения, так что они видны внутри SVG, загружаемых с помощью тегов img.

Преимущество такого подхода заключается в том, что изображения все еще отображаются с использованием тега img, так что обходной путь может быть применен (а затем удален удаленно, когда браузеры в конечном итоге исправлены), не затрагивая остальную часть приложения/веб-сайта.

Недостатком является создание дополнительного тега object для каждого изображения SVG.

Ответ 2

Это решение работает для меня при отображении встроенного SVG-изображения в Safari.

заменить

<img src="image.svg">

с

<object data="image.svg" type="image/svg+xml"></object>

Ответ 3

Кажется, что ответ на этот вопрос работает: Что может сделать Safari пропустить клип-путь и маску с SVG?. См. Инструкции по ссылке из ответа.

Вам нужно воссоздать свой клип, чтобы сделать его видимым. А тег </clippath> не помещается после тега </image>.

Вот маленький измененный код (ссылка на мое изображение вставлена, поэтому вам придется его изменить):

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="328px" height="328px" viewBox="0 0 328 328" enable-background="new 0 0 328 328" xml:space="preserve" >
<g>
    <clipPath id="SVGID_2_">
        <!--use xlink:href="#SVGID_1_"  overflow="visible"></use-->
        <polygon id="SVGID_1_" points="1.414,164.001 164,326.586 326.586,164.001 164,1.414" />
    </clipPath>

    <defs>
        <polygon id="SVGID_1_" points="1.414,164.001 164,326.586 326.586,164.001 164,1.414"/>
    </defs>
</g>

<image clip-path='url(#SVGID_2_)' overflow="visible" width="338" height="532" id="DSC_x5F_0112-2" xlink:href="images/banner_03.jpg" transform="matrix(0.9818 0 0 0.9818 -2.7197 -11.064)">
</image>

<g>
    <path fill="#FFFFFF"  d="M164,328.001L0,164.002L164,0.001l164,164.001L164,328.001z M1.414,164.002L164,326.587l162.586-162.585
        L164,1.415L1.414,164.002z"/>
</g>
</svg>

Ответ 4

Так отметил Анто Юркович, есть некоторые известные проблемы с Safari и clipPath. То, что нравится Safari, - это если вы не определяете многоугольник, но вставьте его прямо в clippPath. Также вы должны отдельно группировать clipPath.

Но я все еще не мог получить svg для рендеринга изображения, если я использовал тег img для svg - <img src="svg"/>. Поэтому в конце я вложил его так:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="328px" height="328px" viewBox="0 0 328 328" enable-background="new 0 0 328 328" xml:space="preserve">
<g>
    <clipPath id="SVGID_2_">
        <polygon id="SVGID_1_" points="1.414,164.001 164,326.586 326.586,164.001 164,1.414      "/>
    </clipPath>
</g>
<image clip-path="url(#SVGID_2_)" overflow="visible" width="338" height="532" id="DSC_x5F_0112-2" xlink:href="data:image/jpeg;base64,/9j/.....r/fdeaS//9k=">
</image>
<g>
    <path fill="#FFFFFF" d="M164,328.001L0,164.002L164,0.001l164,164.001L164,328.001z M1.414,164.002L164,326.587l162.586-162.585
        L164,1.415L1.414,164.002z"/>
</g>
</svg>

Я могу подтвердить, что это правильно отображается в мобильном сафари (на ipad и iphone, сафари для windows и сафари Mac - последние версии).

Итак, чтобы подвести итог... У меня есть этот svgs в отдельном html файле и рендеринг их при необходимости.

Ответ 5

Я столкнулся с этой проблемой, когда я использовал Ajax для загрузки svg spritesheet на страницу. Если бы у меня была страница на странице до того, как был загружен спрайт, она потерпит неудачу и не будет разрешаться после того, как спрайт будет доступен. Любое добавление в дом после загрузки спрайта было прекрасным. Мне пришлось откладывать предметы в доме до тех пор, пока после того, как спрайт закончил загрузку.

Это повлияло только на IOS. Все остальные браузеры не заботились о заказе.