html - タイルではなく伸びる SVG 背景を作成するにはどうすればよいですか?

Question

使用したい SVG 背景がありますが、それをページ全体に引き延ばす方法がわかりません。背景にすることはできません。誰か助けてくれませんか？

(SVG と背景の両方の W3Schools ページでは、何も得られませんでした)。

<object data="background.svg" type="image/svg+xml" width="100%" height="100%">正確には機能しません。

Answer 1

CSS3background-sizeプロパティが必要です。

div {
  height:200px;
  background:url(my.svg);
  background-size: 100% auto; /* Fill width, retain proportions */
}

デモ: http://jsfiddle.net/JknDr/1/ </h2>

コンテナを埋めるために不均等にスケーリングする場合（背景が伸びたり縮んだりするため）、 を使用しますbackground-size: 100% 100%。

Answer 2

Illustrator がxml:space="preserve"SVG に追加しているため、背景画像がスペースに収まるように伸びていないことがわかりました。これは廃止されたようです。ただし、Illustrator はまだ追加中です。その属性を変更して、意図したとおりに画像のスケールをxml:space="preserve"追加したら。preserveAspectRatio="none"