3

iOS の UIWebView で SVG グラフィックを表示しようとしています。ただし、私が使用している画像では、Web ビューはグラフィックの上下に大量の空白、数百ピクセルを追加しています。画像が垂直方向に画面の半分になるため、完全に表示するにはスクロールする必要があります。

私はこの問題について高低を検索し、多くのことを試しました。ここで共有する「十分な」回避策があります。誰かがより良い修正を行い、同じ問題に遭遇した他の誰かを助けるために、この質問をしています。

私が使用している実際の画像は、別のツール (inkscape によって後処理された lilypond) によって生成された楽譜です。ただし、幅が高さの 2 倍であるこの単純な長方形は、まったく同じ問題を示しています。

<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]とwebViewDidFinishLoad1024x1120 が返されます。私が期待する1024x512ではありません

私の場合、生の SVG を表示するために UIWebView を取得します。以下は、私が試した効果のないものです。

  • SVG を HTML でラップする

  • SVG を HTML でラップし、次の 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 を表示するためのこれら 2 つの呼び出しは、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 に答える