在使用視圖框時在UIWebView中顯示SVG圖形時出現垂直間距問題

我想在iOS的UIWebView中顯示SVG圖形。但是，使用網絡視圖的圖像會在圖形的上方和下方添加大量的空白區域，像素爲100像素。通向屏幕垂直一半的圖像，您必須滾動才能將其完全放入視圖中。在使用視圖框時在UIWebView中顯示SVG圖形時出現垂直間距問題

我在這個問題上搜索了很高和低，並嘗試了很多很多東西。我已經有了一個「足夠好」的解決方法，我將在此分享。我問這個問題，以防萬一誰有更好的解決辦法，並幫助遇到同樣問題的其他人。

我使用的真實圖像是由另一種工具生成的樂譜（lilypond後處理的inkscape）。然而，這個簡單的矩形是其高度的兩倍，顯示了完全相同的問題。

<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，我得到了別的地方在計算器上。

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

刪除圖像頂部的多餘空白，但將其留在底部。這只是一個部分的解決方法，就像它最初看起來是正確的，你仍然可以滾動，當你不應該能夠。因此，我仍然需要禁用滾動以保持它看起來正確。

有什麼想法？

來源

2013-01-09 John Holcroft

我用你的形象，並在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'/>

僅供參考，您需要的網頁視圖還設置scalesPageToFit，你會需要設置的網頁視圖用正確的媒體類型。像這樣：

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。

來源

2013-01-09 19:20:41

嗨克里斯，感謝您花時間看看這個。正如你所說的'見面'和'切片'做不同的事情，適合vs填充。該視口是一個不錯的主意，我試圖用它來縮放圖像，以替代SVG中的viewBox。我現在沒有使用它，但我會保留它作爲一個選項。除此之外，我無法看到將SVG直接放入UIWebView並使用您所描述的選項和方法將其封裝在HTML中之間的行爲差異。然而，我真正的問題是由於我將在下面發佈的一個搞砸了。 –

部分，但不是全部，我的問題是由於設置UIWebView尺寸時出錯。我試圖通過使用此代碼將UIWebView設置爲全屏。

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

事實證明，這並不是正確的，因爲應用程序框架始終以縱向方向返回，並且我在橫向查看。所以webview被設置得太高又太薄，然後它必須被自動調整爲全角。因此，大規模的垂直空間似乎只是圖像的中心。

但是，多餘的垂直空白問題仍然存在，只是少了很多。所以我堅持我在SVG中添加preserveAspectRatio="xMinYMin meet"的解決方案。

有趣的新知識從嘗試克里斯範德梅伊的建議。這兩個顯示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-10 11:15:36

我剛剛有類似的問題。不知何故加載about:blank第一次幫助...

來源

2013-04-17 13:35:23 Anton

在使用視圖框時在UIWebView中顯示SVG圖形時出現垂直間距問題

回答

相關問題