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

Question

Проблема с вертикальным интервалом с графикой 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

добавлено 09 Январь 2013 в 05:19 автор John Holcroft

Просмотры: 3

источник

nl ja de

3 ответы

Видеокурс "Создание приложений для Android"

Получи множество видеоуроков по Android сейчас

Мини-курс по Angular и NgRx

16 видео-уроков

автор Chris Vander Mey · Answer 1 · 2013-01-09T07:20Z

Я использовал ваше изображение, и в 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. См. здесь .

автор John Holcroft · Answer 2 · 2013-01-10T11:15Z

Часть, но не все, из моей проблемы была связана с ошибкой, устанавливающей размеры 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];

автор Anton · Answer 3 · 2013-04-17T01:35Z

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