Question

我正在尝试在UIWebView for iOS中显示SVG图形。然而，对于我使用网页视图的图像，在图形上方和下方添加了大量的空白区域，100像素。导致图像垂直于屏幕的一半，您必须滚动才能完全进入视图。

我在这个问题上搜索得很高，并尝试了很多很多东西。我有一个“足够好”的解决方法，我将在这里分享。如果有人有更好的解决办法并帮助遇到同样问题的其他人，我会问这个问题。

我正在使用的真实图像是由另一个工具（由inkscape处理的lilypond帖子）生成的乐谱。然而，这个宽度是高的两倍的简单矩形显示了完全相同的问题。

<svg xmlns="http://www.w3.org/2000/svg" version="1.2" viewBox="0 0 20 10" width="100%" height="100%">
  <rect height="10" style="fill:currentColor" width="20" x="0" y="0" />
</svg>

如果您在Safari或Chrome中查看它，那么它会完美显示，填充窗口并从顶部开始。但在UIWebView中，它上面和下面都有大量的空白区域。如果删除viewBox属性，则随机的额外空格会消失，但这没有用，因为图形是微不足道的。无论如何，SVG是正确的。在[webView sizeThatFits:CGSizeZero]中呼叫webViewDidFinishLoad会返回1024x1120。不像我期望的那样1024x512

在我的情况下，我得到UIWebView来显示原始SVG。以下是我尝试过的没有效果的事情。

以HTML格式包装SVG

在HTML中包装SVG并添加以下CSS：

* {
margin: 0;
padding: 0;
}
body { overflow: hidden; }

将以下代码放在webViewDidFinishLoading中，我在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;
}

部分解决方法是在svg标记中添加属性preserveAspectRatio="xMinYMin meet"。

<svg xmlns="http://www.w3.org/2000/svg" version="1.2" 
  preserveAspectRatio="xMinYMin meet" viewBox="0 0 20 10" width="100%" height="100%">
  <rect height="10" style="fill:currentColor" width="20" x="0" y="0" />
</svg>

删除图像顶部的多余空格，但将其留在底部。这只是一个部分的解决方法，好像它最初看起来正确，你仍然可以滚动，你应该不能。因此，我仍然需要禁用滚动以使其保持正确。

有什么想法吗？

Answer 1

我使用了你的图像，在iOS5.1和6中我可以让图像完全适合或左上角对齐。我用

做了这个

preserveAspectRatio="xMinYMin meet"

适合宽度和宽度坚持到顶部，并适合窗户：

preserveAspectRatio="xMinYMin slice"

此外，为了允许缩放，我将SVG嵌入HTML中并添加元标记。初始比例适合视口。

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

作为参考，您需要另外将webView设置为scalesPageToFit，并且您需要使用正确的mimeType设置webView。像这样：

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的要求。见here。

Answer 2

我的问题的部分（但不是全部）是由于设置UIWebView维度时出错。我试图通过使用此代码将UIWebView设置为全屏。

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

事实证明这不是正确的，因为应用程序框架始终以纵向方式返回，而我正在横向查看。所以webview设置得太高太薄，然后它必须自动调整为全宽。因此，巨大的垂直白色空间似乎只是图像居中。

然而，垂直白色空间过剩的问题仍然存在，只是少了很多。所以我坚持在SVG中添加preserveAspectRatio="xMinYMin meet"的解决方案。

尝试Chris Vander Mey的建议有趣的新知识。这两个显示SVG的调用是相同的，只是loadData显示边缘到边缘的图像，但loadHTMLString为它提供了默认的填充。

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

[self.webView loadHTMLString:svgContent baseURL:baseURL];

Answer 3

我刚遇到类似的问题。以某种方式加载about:blank首先帮助......

使用viewBox时，UIWebView中显示的SVG图形的垂直间距问题

3 个答案: