Проблема с вертикальным интервалом с графикой SVG, отображаемая в UIWebView при использовании viewBox

Я пытаюсь отобразить SVG-графику в UIWebView для iOS. Однако с изображениями, которые я использую в веб-представлении, добавляется большое количество белого пространства, 100 пикселей пикселей выше и ниже графика. Приведение к изображению половины экрана по вертикали, и вам нужно прокрутить, чтобы получить его полностью в поле зрения.

Я искал высоко и низко по этому вопросу и много раз пробовал. У меня есть «достаточно хороший» обходной путь, который я поделюсь здесь. Я задаю этот вопрос, если у кого-то есть лучшее исправление и помочь любому, кто сталкивается с той же проблемой.

Реальные изображения, которые я использую, - это ноты, созданные другим инструментом (сообщение lilypond обработано inkscape). Однако этот простой прямоугольник, который в два раза шире, чем высокий, показывает ту же самую проблему.


  

Если вы просмотрите это в Safari или Chrome, то он отобразится отлично, заполнив окно и начиная сверху. Но в UIWebView у этого огромного количества белого пространства выше и ниже него. Если вы удалите атрибут viewBox, тогда случайное дополнительное пробел исчезнет, ​​но это не полезно, так как графическое изображение является миниатюрным. И в любом случае SVG правильный. Вызов [webView sizeThatFits: CGSizeZero] в webViewDidFinishLoad возвращает 1024x1120. Не 1024x512, как я ожидал бы

В моем случае я получаю UIWebView для отображения необработанного SVG. Вот те вещи, которые я пробовал, которые не имеют никакого эффекта.

  • Wrapping the SVG in HTML
  • Wrapping the SVG in HTML and adding the following CSS:

    * {
    margin: 0;
    padding: 0;
    }
    body { overflow: hidden; }
    
  • Putting the following code in webViewDidFinishLoading, which I got somewhere else on StackOverflow.

    - (void)webViewDidFinishLoad:(UIWebView *)webView {
        CGRect frame = webView.frame;
        frame.size.height = 1;
        webView.frame = frame;
        CGSize fittingSize = [webView sizeThatFits:CGSizeZero];
        frame.size = fittingSize;
        webView.frame = frame;
    }
    

Частичным обходным путем является добавление атрибута preserveAspectRatio = "xMinYMin meet" в теге svg.


  

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

Есть предположения?

3
nl ja de

3 ответы

Я использовал ваше изображение, и в iOS5.1 и 6 я могу либо получить изображение в полном объеме, либо оправдать верхнюю левую сторону. Я сделал это с помощью

preserveAspectRatio="xMinYMin meet"

for the fit to the width & stick to the top, and for the fit-to-the-window:

preserveAspectRatio="xMinYMin slice"

Кроме того, чтобы масштабировать, я вставляю SVG внутри HTML и добавляю метатег. Начальная шкала подходит для окна просмотра.

<meta name='viewport' content='initial-scale=1.0; user-scalable=1; maximum-scale=20.0'/>

Для справки вам нужно дополнительно настроить ваш webView на scalesPageToFit, и вам нужно настроить свой webView с помощью правильного mimeType. Вот так:

webView.scalesPageToFit = YES;
[webView   loadData:[htmlPage dataUsingEncoding:NSUTF8StringEncoding]
           MIMEType:@"image/svg+xml"
   textEncodingName:@"UTF-8"
            baseURL:baseURL];

Конечный верхний совет: «xMidYMid»! = «XMidyMid». Вы заметите, что у iOS 6.0 нет никаких проблем с этой разницей, но спецификация говорит «xMidYMid», и это то, что требует iOS 5.1. См. здесь .

2
добавлено
Привет Крис, спасибо, что нашли время посмотреть на это. Как вы говорите, «meet» и «slice» делают разные вещи, подходят vs fill. Видовой экран - хорошая идея, и я попытался использовать его для масштабирования изображения в качестве альтернативы viewBox в SVG. Я не использую его сейчас, но я сохраню его как вариант. Кроме этого, я не видел различий в поведении между помещением SVG непосредственно в UIWebView и его упаковкой в ​​HTML с описанными вами опциями и методом. Однако моя реальная проблема была вызвана шумом, который я опубликую ниже.
добавлено автор John Holcroft, источник

Часть, но не все, из моей проблемы была связана с ошибкой, устанавливающей размеры UIWebView. Я пытаюсь настроить UIWebView на полноэкранный режим, используя этот код.

CGRect screenFrame = [UIScreen mainScreen].applicationFrame;
self.webView = [[UIWebView alloc] initWithFrame:screenFrame];
[self.webView setAutoresizingMask:UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight];

Это оказалось не правильным, так как рамка приложения всегда возвращалась в портретной ориентации, и я смотрел в ландшафте. Таким образом, веб-просмотр был слишком высоким и слишком тонким, поэтому он должен был быть автоматически изменен для полной ширины. Следовательно, массивное вертикальное белое пространство, по-видимому, только что было центром изображения.

Однако проблема с избыточным вертикальным белым пространством остается, намного меньше. Поэтому я придерживаюсь своего решения добавить preserveAspectRatio = "xMinYMin meet" в SVG.

Интересные новые знания от опробования предложений Криса Вандера Мей. Эти два вызова для отображения SVG идентичны, за исключением того, что loadData отображает край изображения к краю, но loadHTMLString дает его по умолчанию.

[self.webView loadData:[svgContent dataUsingEncoding:NSUTF8StringEncoding]
              MIMEType:@"image/svg+xml" textEncodingName:@"UTF-8" baseURL:baseURL];

[self.webView loadHTMLString:svgContent baseURL:baseURL];
1
добавлено

У меня была аналогичная проблема. Как-то loading о: blank сначала помогло ...

0
добавлено
Mobile Dev Jobs — вакансии и аналитика
Mobile Dev Jobs — вакансии и аналитика
6 187 участник(ов)

Публикуем вакансии и запросы на поиск работы по направлению iOS, Android, Xamarin и т.д. ВАЖНО: Правила публикации и правила канала: Ссылка – https://telegra.ph/Pravila-oformleniya-vakansij-i-rezyume-11-09-2

Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

iOS Developers — русскоговорящее сообщество
iOS Developers — русскоговорящее сообщество
2 400 участник(ов)

Общаемся на темы, посвященным iOS-разработке, Swift, Objective-C, SDK, Rx, Cocoa и т.д.

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)