Проблема с SVG для мобильного Safari

Я пытаюсь получить SVG-образ, чтобы отображаться на моем браузере по умолчанию для iPhone (или iPad), но я не могу показаться, что вы просто выглядите.

Пример: http://www.invalidpage.com/svg/svgtest.html

Источник:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/html1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
  <head>
    <title>SVG iPhone Test</title>
  </head>
  <body>
    <div>
      <svg width="500" height="220">
        <rect x="2" y="2" width="496" height="216" stroke="#000" stroke-width="2px" fill="transparent"></rect>
      </svg>
    </div>
  </body>
</html>

Ответы

Ответ 1

Добавьте xmlns="http://www.w3.org/2000/svg" version="1.1" в тег svg.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/html1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
  <head>
    <title>SVG iPhone Test</title>
  </head>
<body >
      <svg width="500" height="220" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <rect x="2" y="2" width="496" height="216" stroke="#000" stroke-width="2px" fill="transparent"></rect>
      </svg>


</body>
</html>

Тип HTTP MIME, предоставляемый http://www.invalidpage.com/svg/svgtest.html представляет собой "Content-Type: text/html". Встроенный в HTML svg работает с MIME-типом "Content-Type: text/xml" Вы можете создать это, завершив документ XML, а не HTML, как они сделали здесь.

Не уверен, что Ipad заботится о Content-Type но другие браузеры это делают.

обновленный

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

Может также использоваться; Это то, что показано на примерах Ipad SVG. Когда документ доставляется в виде XML, а не HTML, он должен начинаться с <xml version="1.0" standalone="no">;

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">


      <svg width="500" height="220" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <rect x="2" y="2" width="496" height="216" stroke="#000" stroke-width="2px" fill="transparent"></rect>
      </svg>

Ответ 2

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

У меня был SVG-тэг, отображающий все правильно в каждом браузере (даже IE9 +), за исключением iOS. У меня была высота css svg, установленная на 100%, которая работала везде, но на iOS она оказалась на 100% от высоты всей страницы, а не только ее родительского элемента! Это заставило мои внутренние элементы SVG отображаться вне их окна просмотра.

Добавление position: absolute в svg-тег исправило мою проблему, и оно было правильно отображено на iOS и везде (родительский элемент уже был позиционирован, поэтому это не изменило фактическое положение svg). Другие стили позиции также могут работать.

Ответ 3

У меня была эта проблема и с мобильным Safari. Что вы можете сделать, это загрузить SVG в DOM с помощью javascript:

$(document).ready(function(){
    var svg = '<svg width="500" height="220" xmlns="http://www.w3.org/2000/svg" version="1.1"><rect x="2" y="2" width="496" height="216" stroke="#000" stroke-width="2px" fill="transparent"></rect></svg>';
    var chart = document.adoptNode($('svg', $.parseXML(svg)).get(0));

    $('body').html(chart);
);

Это просто пример - очевидно, что вы не собираетесь хранить свой SVG в такой последовательности, как на практике.

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

Ответ 4

У меня также возникла проблема с отображением больших SVGS (размеров) в браузерах IOS. Путем масштабирования его я получил его для работы.

Я думаю, что примерно 1000 пикселей и вниз это сделают.. Один мой друг сказал мне, что, возможно, что-то с Integer Limits для IOS.

http://msdn.microsoft.com/en-us/library/7fh3a000.aspx

Ответ 5

Смешивание тегов SVG с тегами HTML без использования хорошо сформированного документа XHTML и пространств имен (см. ответ Уэйна) не поддерживается в Safari для iOS 4.2.1 и более ранних версий и не поддерживается в Safari 5.0.x и более ранних версиях на Mac OS X и Windows.

Включение тегов SVG в HTML-документ является новой функцией парсеров HTML5. Если вы загрузите и запустите ночную сборку WebKit для Mac OS X или Windows, вы увидите, что ваш тестовый пример работает так, как ожидалось.

Ответ 7

Вы пытались встроить его в <object>.

<object type="image/svg+xml" item-prop="image" id="[give any id]" data=" [mention your file name] "></object>

например

<object type="image/svg+xml" item-prop="image" id="svgImage" data="images/svgImage.svg"></object>

Я думаю, что это должно сработать!

Ответ 8

Даже со всеми другими советами на этой странице я не мог заставить его работать (даже в Safari).

Итак, я нашел рабочий пример:

http://upload.wikimedia.org/wikipedia/en/3/35/Starbucks_Coffee_Logo.svg

и скопировал файл на мой собственный сайт. Мне все равно не повезло, поэтому я просмотрел этот файл и свой собственный, используя программу просмотра Rex Swain HTTP:

http://www.rexswain.com/httpview.html

Разница стала очевидной. Мой svg использовался как text/html, а логотип Starbucks выполнялся как image/svg + xml.

Решение заключалось в том, чтобы изменить заголовок, добавив:

addtype image/svg+xml .svg

в файл .htaccess.