8
私はsvgの内部にrectを持っていますが、rectはいくつかのパターンで埋められています。このパターンはちょうどpng画像です。 FireFox、Safariなどでこの矩形をズームするのは素晴らしいですが、ChromeやChromiumではできません。 Chromeはこの画像を少しぼかしています。私は同様の問題を探していましたが、私はsvg、rect、patternを100％の幅と高さにする必要があります...コンテナのサイズは100％にする必要があり、固定サイズではありません。あなたが画像をスクロールズームしていくつかの小さなキャプションを検索する必要があり、この効果を確認するにはhttp://jsfiddle.net/j5gfjnpd/2/Chromeをズームした後、svgパターン内の画像がぼやけて表示されます
<div style="width: 100vw; height: 100vh">
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<defs>
<pattern id="floor" viewBox="0 0 3508 4962" width="100%" height="100%" patternContentUnits="objectBoundingBox" preserveAspectRatio="xMidYMid meet">
<image id="test" width="3508" height="4962" preserveAspectRatio="xMinYMin meet"></image>
</pattern>
</defs>
<g id="mapZoom">
<rect width="100%" height="100%" fill="url(#floor)">
</rect>
</g>
</g>
</svg>
</div>
：私は、効果を確認するためにフィドルを作成しました。 Chromeでは、それらはぼやけていて、FireFoxでは本当にきれいでいいです。
これを修正しようとしている私の頭が失われているので、いくつかの修正がありますか？私はいくつかの助けを見て本当にうれしいです。おかげで事前に
画像タグにはリンクがありません。問題のあるイメージをフィドルに追加してください。 –
@MichaelMullanyありがとう、何らかの理由でサーバから逃げました。imgurに再アップロードしました – Spinach
これはイメージ、テキスト、または背景イメージを変換する際にCSS変換に影響を与える 'webkit'アンチエイリアスバグが原因です。このバグは、スケールが「1」以下の場合、その醜い頭を表示しません。したがって、スケールファクタ「1」を上回ってスケールしないでください。画像が「1」を上回ってスケールされると、要素がペイントされ、合成レイヤーにレンダリングされた後に画像が変化します。 SVGは3D変換を使用することはできませんが、2D変換のみを使用することができます.GPUのためにこれを見るのではなく、単にWebkitのバグです。 –