22

携帯電話のさまざまなピクセル密度の地獄から逃れるために、CSS の背景画像として SVG ファイルを使用しています。

Chrome for Android は inline-svg を問題なくレンダリングしているようですが、svg が

  • css で使用されbackground-image、通常の URL
  • css で使用されbackground-image、データ uri
  • image要素で使用されます

Android 4 の標準ブラウザは問題なく動作します。（そして私が試した他のすべての携帯電話も）

このフィドルにアクセスして確認できます。ズームインして違いを確認してください。

ここでクロムが事前にレンダリングされたビットマップを使用する理由を知っている人はいますか?

4

5 に答える 5

14

この問題および他の同様の問題で他の回答が指摘しているように、SVG のレンダリングは、クロムおよびネイティブの Android Web ブラウザーで問題があります。これは既知のクロム/ネイティブ ブラウザの問題です。

数日間にわたって多くの解決策を検討した後、偶然この回避策を見つけました。秘訣は、SVG ファイル内にテキストを埋め込むことです。これは単一の透過文字にすることができます。

たとえば、これ (または類似のもの) を SVG ファイルに追加します。

<text transform="matrix(1 0 0 1 7.1079 13.5215)" opacity="0" font-family="'MyriadPro-Regular'" font-size="12">a</text>

実際のクロムソースまたはプロセスを調査せずに、テキストを埋め込むことで、高 dpi デバイスのスケールアップ時に SVG を強制的に再レン​​ダリングすることしかできないと推測できます。

このソリューション (Android/Chrome でテストできたブラウザーで) は、background-image 要素の使用方法、回転、固定位置などに関係なく機能します。また、ズーム下でもはっきりしているように見えます。

楽しみ！

于 2013-04-18T06:46:08.383 に答える
10

これは既知の問題ですhttps://code.google.com/p/chromium/issues/detail?id=161982

SVGが画像（または背景画像）としてレンダリングされた場合、元々はCSSピクセル密度でレンダリングされていたため、1 CSS px！= 1デバイスpxのデバイスではぼやけてしまい、ほとんどのハイエンドAndroidフォンが含まれます。

この問題はChrome25（執筆時点での現在のバージョン）で修正されましたが、ビューポートを拡大すると画像が再びぼやけます。

この問題はChrome26（現在はChromeベータ版、Playストアで入手可能）で修正されており、SVG画像と背景は鮮明なままです。

于 2013-03-22T15:54:01.647 に答える
0

SVG ファイルを挿入する場合、ファイルは事前にレンダリングされます (ホストによっては、Wikipedia など)。したがって、ロード時に、画像は指定されたサイズでレンダリングされます。インライン SVG (ページに直接コード化) は、ページのサイズが変更されるとサイズが変更されます。ただし、ページ内の要素のサイズを変更せず、「ズーム」するだけなので、モバイルブラウザーについてはわかりません

つまり、基本的には、SVG を Canvas にペイントして (駄洒落!)、キャンバスをズームします。インラインには直接 SVG があります...とても良いです....

于 2013-02-22T03:30:55.263 に答える
0

私の場合、犯人はフィルター属性であることがわかりました

<g filter="url(#filter0_d)">

filter 属性を削除することで、SVG はビットマップではなくベクターとしてレンダリングされました。

<g>

<filter>念のためタグも外しました

<filter id="filter0_d" x="-261" y="50" width="1490" height="950" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset/>
<feGaussianBlur stdDeviation="12.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
于 2021-01-27T16:21:18.740 に答える