Мобильный Safari SVG Проблема - PullRequest
Новая
       10

Мобильный Safari SVG Проблема

32 голосов
/ 22 декабря 2010

Я пытаюсь получить изображение 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>

Ответы [ 7 ]

40 голосов
/ 22 декабря 2010

Добавьте 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>
7 голосов
/ 27 мая 2014

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

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

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

5 голосов
/ 03 октября 2011

У меня раньше была эта проблема с мобильным 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, используя описанный выше подход.

2 голосов
/ 02 октября 2014

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

Я думаю, что около 1000px и вниз сделает это .. Мой друг сказал мне, что, возможно, это связано с целочисленными ограничениями для IOS.

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

1 голос
/ 07 января 2011

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

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

0 голосов
/ 18 июля 2014

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

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

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

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

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

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

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

addtype image/svg+xml .svg

в файл .htaccess.

0 голосов
/ 31 декабря 2013

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

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

* 1005 например * 

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

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

...