3

我正在尝试在 iOS 的 UIWebView 中显示 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是正确的。调用返回 1024x1120 [webView sizeThatFits:CGSizeZero]。webViewDidFinishLoad不是我期望的 1024x512

就我而言，我让 UIWebView 显示原始 SVG。这是我尝试过的没有效果的事情。

  • 在 HTML 中包装 SVG

  • 用 HTML 包装 SVG 并添加以下 CSS：

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

  • 将以下代码放入webViewDidFinishLoadingStackOverflow 上的其他地方。

    - (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 标记中添加属性。

<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>

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

有什么想法吗？

4

3 回答 3

2

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

preserveAspectRatio="xMinYMin meet"

适合宽度并粘在顶部，以及适合窗户： 

preserveAspectRatio="xMinYMin slice"

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

<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 所要求的。见这里。

于 2013-01-09T19:20:41.113 回答
1

我的部分但不是全部问题是由于错误设置 UIWebView 尺寸。我试图通过使用此代码将 UIWebView 设置为全屏。

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

事实证明这是不对的，因为应用程序框架总是以纵向返回，而我正在横向查看。所以 webview 被设置得太高太薄了，那么它必须被自动调整为全宽。因此，巨大的垂直空白似乎只是图像的中心。

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

从尝试 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];
于 2013-01-10T11:15:36.000 回答
0

我刚刚遇到了类似的问题。不知何故，首先加载有about:blank帮助……</p>

于 2013-04-17T13:35:23.423 回答