14

ページの本文のタイル背景として SVG 画像を使用すると、タイル間にわずかな隙間ができます。ファイルの PNG バージョンに切り替えると、それは起こりません。

Mac 用 Google Chrome の最新バージョン (バージョン 19.0.1084.56) を使用しています。そのプラットフォームを持っていないため、Windows をテストしていません。ファイルは Safari と FF で期待どおりに機能します。

たくさんの Google 検索とここでの検索の後、同様のレポートは見つかりませんでした。多分誰かがここに解決策を持っています。

ここに私のテストコードがあります:

<!DOCTYPE html>
<html>
<head>
<title>SVG background test</title>
<style type="text/css">
body {
   background-color: #FFF;
   background-image: url(img/assets/background.svg);
   background-repeat: repeat;
}
</style>
</head>
<body>
</body>
</html>
4

3 に答える 3

11

これは Chrome で発生しているだけでなく、そのブラウザでより顕著でした。上に投稿したように、ここに解決策があります。わずかに異なる Chrome/svg の問題の解決策を読んだ後、答えを見つけました。他の誰かがこの問題に遭遇した場合に備えて、ここに投稿してください。Illustrator で SVG ファイルを作成しました。どうやら私のアートボード/画像サイズは正確なピクセル単位ではありませんでした。SVG ファイルをテキスト エディターで開き、ファイルの上部を見て、これを発見しました。

width="229.9999px" height="147.4256px"

イラストレーターで svg ファイルを開き、寸法が正確に偶数ピクセルであることを確認してから、テキスト ファイルで再度確認しました。修正された寸法は次のとおりです。

width="230px height="148px"

何らかの理由で、テキスト ファイルの値を編集するだけではうまくいきませんでしたが、svg テキスト ファイルを正しく編集する方法を理解するよりも、Illustrator で修正する方が高速でした。とにかく、今はタイルに隙間がありません。彼らがこの問題を抱えているなら、それが他の誰かを助けることを願っています.

于 2012-07-05T23:39:00.457 に答える
2

探すべきことが 4 つあります (この回答は、解決策を探してここにたどり着いた他の人のためのものです)。

  1. heightとwidthが「小数部なし」の整数であることを確認します（Violetで言及されているように、小数はありません）
    例：height="326.25"vsheight="326"

  2. あなたviewboxも整数である
    ことを確認してviewBox="0 0 306.25 753"くださいviewBox="0 0 306 753"

  3. また、ビューポートがある場合は、preserveAspectRatio属性
    Learn More On MDNを設定することもできます

  4. もう 1 つ注意すべき点は、svgタグに高さと幅の属性を設定することです。これにより、IE のbackground-sizeサイジングの問題が解決されます。これはそれについての良い記事です。

私の状況では、SVG は Chrome では正しく繰り返されましたが、すべての属性を整数に設定するまで Firefox ではギャップがありました。

于 2016-02-26T18:43:48.330 に答える
2

幅や高さの問題ではありません。SVG パターンが 100px x 100px で小数点以下がない場合でも表示されます。

次のように、svg ファイルに preserveAspectRatio="none" を入れる問題を解決できます。<svg preserveAspectRatio="none" ...>

ただし、svg パターンを繰り返したい場合は、パターンが歪むため、このオプションを選択できません。

答えは見つかりましたか？

于 2016-10-12T16:46:43.720 に答える