0

私は長い間問題を抱えていて、解決策が見つかりません。

divの左上隅にcss背景としてSVG画像があります。SVG グラフィックは、div の背景にシームレスにマージする必要があり、代わりにレンダリングされたグラフィックの周りに細い境界線を生成します。デスクトップ ブラウザー (Chrome、Firefox、Opera でテスト済み) では正常に動作しますが、android ストック ブラウザー、android の chrome、android の firefox では失敗します。

ここに小さなテストケースがあります: http://jsfiddle.net/SDJHA/1/ (SVGコードはコメントとしてJavascriptフレームにあります)

CSS コードは次のとおりです。

.cont{ background-color : #7AC943; width : 300px; height : 300px; }

.elementOne{
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%22100px%22%20height%3D%22100px%22%20viewBox%3D%220%200%20100%20100%22%20enable-background%3D%22new%200%200%20100%20100%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20fill%3D%22%237AC943%22%20points%3D%22100%2C100%20100%2C0%200%2C100%20%22%2F%3E%3C%2Fsvg%3E");
    width : 100px; height: 100px;
    background-size: 100px 100px;
    background-repeat: no-repeat;
    background-color : white;
}

HTML : <div class="cont"><div class="elementOne"></div></div>

サブピクセルを計算するときのAndroid SVGレンダリングエンジンのバグかもしれません...わかりません。

Asus Transformer と HTC One でテスト済み。

アドバイスはありますか？

ありがとう ！

4

1 に答える 1

0

2つの部分をページに合成したために線が表示されると思います。コーナーは不透明で、より大きな div をカバーしようとします。エッジのアンチエイリアシング効果が得られます。

svg が同じサイズの png である場合、同じ方法で適用されたと仮定すると、同じ効果が得られると思います。

背景画像で大きな div を使用する場合と同様に、必要な形状をトレースした単一の背景 svg 画像を使用できます。

于 2013-08-26T09:19:17.993 に答える