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

Question

我正在尝试在 iOS 的 UIWebView 中显示 SVG 图形。然而，对于我正在使用的图像， WebView 在图形上方和下方添加了大量的空白区域，数百像素。导致图像垂直占据屏幕的一半，您必须滚动才能完全看到它。

我在这个问题上进行了高低搜索，并尝试了很多很多事情。我有一个“足够好”的解决方法，我将在这里分享。我问这个问题是为了防止有人有更好的解决方法并帮助遇到同样问题的其他人。

我使用的真实图像是由另一个工具(由 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 是正确的。在 webViewDidFinishLoad 中调用 [webView sizeThatFits:CGSizeZero] 返回 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 中并添加了一个元标记。初始比例适合视口(viewport)。

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