Iphone не отображается svg

Question: Q: Problem with SVG on some iPad and iPhone models

I’m developing a website for use on mobile devices. I’m having problems with the display of an SVG file on (only) some iPad models and, on iPhone, only on the latest iPhone 6.

A jpg image within an tag in an SVG file is getting wrongly resized on some iPad models but not on others. (See list below.)

I have a webpage (link below) which includes a complex SVG file. This SVG contains a jpg image (raster) as an tag (which serves as a background for the whole thing), along with many and

elements (vector). On some iPads the jpg image gets resized improperly, out of synch with the vector elements which display correctly. On problematic models, the background image does not line up with the dots (vector elements) because it is being resized larger by the device. On a computer it is displaying correctly.

See below note about which models have problems.

The whole thing is meant to be scaled up and down so people can zoom in and out, and the vector elements should resize along with the background raster image. Only on some iPads (and iPhone 6) are they not displaying correctly.

iPad 1 (and 2?): OK (confirm iPad 2 if you can!)

iPad Air 2: Raster image problem

iPad Mini 1: Raster image problem

iPad Mini 3: Raster image problem

Please compare how this works on a computer versus problematic versions of iPad:

Any ideas on why that (background) image would be getting sized incorrectly on those particular models, but is OK on the others?

And of course, if you have any suggestions on how to SOLVE the problem. 🙂

Источник

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

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

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

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

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

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

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

ОТВЕТЫ

Ответ 1

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

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

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

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

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

Ответ 2

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

Ответ 3

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

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

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

Ответ 4

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

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

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

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

Ответ 5

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

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

Источник

И за чего SVG не отображается нормально на iphone?

Добрый день есть такой код SVG

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

1 ответ 1

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

Есть две потенциальные ошибки, которые могут не обрабатываться Safari

1. В градиенте не задано значение первое значение stop offset =»0″

1. В фильтре feColorMatrix указано ошибочное значение 127 непрозрачности, которое не может быть больше 1

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

Update

1. Наиболее вероятной причиной обрезания изображения может бытьFilter effects region (зона действия фильтра)
   При недостаточной ширине или высоте зоны действия фильтра изображение может быть обрезано. Попробуйте увеличить атрибуты width , height и/или подвинуть верхний угол региона x , y

Для примера, я сделаю меньше зону действия фильтра 358 -> 300 и изображение обрежется:

Update2 по комментарию

Да действительно причиной была 3 пункт. На адаптиве я уменьшал размеры svg путем css, но значения width и height для filter оставались неизменными, пришлось задать и для них изменения.

Лучше задавать filter region в процентах width=»120%» height=»120%» x=»-20%» y=»-20%» (Эти значения по умолчанию) filterUnits=»userSpaceOnUse» — в этом случае указывать нельзя (просто удалите)

Источник

SVG спрайт, не отображается на ios iphone ipad

Есть код, index.html
В android, и на ПК, все ок.

А на iphone, ipad — белый экран.
(на пк mac — не проверяла.)

iOS (iPhone/iPad) разработчик (Санкт-Петербург)
Мы предлагаем участие в проекте по разработке клиентского ПО для мобильных устройств iPhone/iPad, а.

Разработчик приложений для iOS (iPhone, iPad)
Работа в г.Дубна, Московской области Требования: Образование высшее специальность.

Запуск iOS приложений без iPhone/iPad?
Задача: запустить приложение для ios и протестировать его, не имея iphone/ipad. Это может быть.

Литература по iOS, Objective-C, Mac OS X, iPhone, iPad, and iPod
Wei-Meng Lee, «Beginning iOS 5 Application Development» Paperback: 656 pages Publisher: Wrox;.

Требуется Разработчик приложений для iOS (iPhone, iPad).
Привет. В крупную Московскую компанию по разработке программного обеспечения требуется Разработчик.

Требуется Senior iOS (iPhone/iPad) разработчик (Киев)
Требования к вакансии: • MS in Computer Science or equivalent • iPhone OS programming experience .

SVG спрайт, как оптимизировать
Сделал спрайт svg, который содержит все svg, всех страниц, которые требуют интерактивности.

Ios 8.x в iphone 4s или оставить ios 7.x?
стоит ли перепрошивать 4s или остаться на семерке. думаю что 8ка будет работать медленне?

C Ipad на iphone
Вопрос собственно вот в чем) есть игра под ipad хотел под iphone отредактировать, почитал сказанно.

Источник

Русские Блоги

Как отобразить файлы SVG в iOS

Как отобразить файлы SVG в iOS

1. Swift iOS: как отображать файлы SVG

Файлы SVG являются одним из стандартов векторной графики, они масштабируемы и могут хранить графическую информацию в читаемом исходном коде (а не в двоичном формате). Например, следующий файл является файлом SVG:

Файлы SVG являются одним из стандартов векторной графики, они масштабируемы и могут хранить графическую информацию в читаемом исходном коде (а не в двоичном формате). Например, следующий файл является файлом SVG:

Это стрелка графа. Этот файл можно загрузить и отобразить с помощью представления UIWebView. Сначала добавьте файл SVG как файл ресурсов в проект и назовите его 1.svg.

Фактически, используйте следующий код для загрузки этого файла:

2. Используйте инструмент SVGKit для разбора файлов SVG

2.1 Использование SVGKit

Мы создаем наш проект в соответствии с обычным Swift, а затем мы следуем требованиям нашего GitHub (Сборка статической библиотеки), здесь я не буду переводить это на самом деле очень просто, создал нашу статическую библиотеку. Файл и папка usr, Обратите внимание, что вы должны следить за файлами в папке «Debug-universal» на GitHub, в противном случае вы получите сообщение об ошибке, и файлы, выбранные для iphone или эмулятора, не будут полностью работоспособны.

1. Создайте новый файл ссылки OCHeader.h, а затем перейдем к настройке сборки, чтобы установить его, обратите внимание на путь, если он создается в папке, вы должны указать имя папки, xxx / xxx.h, в противном случае он сообщит об ошибке.
2. Затем мы устанавливаем некоторые классы, которые мы хотим импортировать в этом OCHeader.h

1. Вы можете напрямую использовать глобальный Swift один раз,

Затем я написал наш код в моем ViewControler

Сначала я установил кнопку для загрузки моего файла SVG после нажатия на него, и файл SVG был импортирован в мой проект заранее.

2.2 Примеры

Создайте новое приложение Single View, перетащите QR-код в проект и добавьте UIView в качестве контейнера для QR-кода в ViewController:

Инициализируйте NSXMLParser для анализа svg, и пусть ViewController реализует NSXMLParserDelegate parser (_: didStartElement: namespaceURI: qualName: attribute 🙂 и parserDidEndDocument (_ 🙂 Для обработки результатов анализа используются два метода:

Далее мы опишем каждую из встреч в синтаксическом анализаторе (_: didStartElement: namespaceURI: qualName: attribute :):

Теги преобразуются в CGRect и сохраняются в массиве, а также преобразуются в CAShapeLayer в parserDidEndDocument (_😃 и добавляются анимации).

Сначала посмотрите на содержимое парсера (_: didStartElement: namespaceURI: qualName: attribute 🙂

Далее идет parserDidEndDocument (_😃, где мы хотим отобразить QR-код:

Источник