SVGの一部をタイル張りの背景として使用しようとしています。しかし、私はそれが正常に動作するように大きな問題を抱えています。これは私のCSS demonstration picture CSSの背景にSVGスプライトのタイルを正しく作成するにはどうしたらいいですか？

です：

body { 
background: url("tiletest.svg#svgView(viewBox(120 32 150 64))"); 
background-size: 30px 32px; 
}

は、そして、ここで私はデモのために使っているSVGのコードです：

私は絵が最高の問題を説明すると思います

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 21.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
<svg height="100" width="360" version="1.1" id="Lager_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
viewBox="0 0 360 100" style="enable-background:new 0 0 360 100;" xml:space="preserve"> 
<style type="text/css"> 
.st0{fill:url(#SVGID_1_);} 
    .st1{fill:#13FF00;} 
    .st2{fill:#2732FF;} 
</style> 
<g> 
    <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="9.094947e-13" y1="9.094947e-13" x2="100" y2="100"> 
     <stop offset="0" style="stop-color:#E7FF00"/> 
     <stop offset="1" style="stop-color:#FF0000"/> 
    </linearGradient> 
    <rect class="st0" width="100" height="100"/> 
</g> 
<polygon class="st1" points="174.68,0 190.92,32.92 227.25,38.2 200.96,63.82 207.17,100 174.68,82.92 142.19,100 148.39,63.82 
    122.11,38.2 158.43,32.92 "/> 
<circle class="st2" cx="310" cy="50" r="50"/> 
</svg>

SVGの完全なビューボックスは0 0 360 100です。私がCSSでSVGを呼び出すと、120の新しいビューボックスが表示されますそれに応じて背景のサイズを変更することもできます（ただし、ビューボックスで定義されたsvgがサイズに関係なくコンテナを塗りつぶすようになっているので、これは問題ではないと確信しています）。

私は、幅と高さ、preserveAspectRatio属性を持つSVGのビューボックスで手を加えようとしましたが、これまで何も機能していませんでした。私は間違って何をしていますか？

出典

2017-01-23 Jonathan SI

をチェックアウトなどのスペースを削除tiletest.svg＃svgView（viewBox（120,32,150,64）） –

あなたはどのブラウザを使用していますか？フラグメント識別子などは、すべてのブラウザで十分にサポートされていません。 – Ruskin

<更新>

私は以下の書いたことは有用であるが、それは完全にあなたの問題を解決しませんでした。 SafariとiOSのサポートがフレーク状であるという条件で、私は以下のようにSVGの高さと幅を除去することにより、作業コードを得た：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 100"> 
    <linearGradient id="grad" x2="100" y2="100" gradientUnits="userSpaceOnUse"> 
    <stop offset="0" stop-color="#E7FF00"/> 
    <stop offset="1" stop-color="#F00"/> 
    </linearGradient> 
    <path d="M0 0h100v100H0z" fill="url(#grad)"/> 
    <path d="M174.68 0l16.24 32.92 36.33 5.28-26.29 25.62 6.21 36.18-32.49-17.08L142.19 100l6.2-36.18-26.28-25.62 36.32-5.28z" fill="#13FF00"/> 
    <circle cx="310" cy="50" r="50" fill="#2732FF"/> 
</svg>

次のHTMLを使用してクロム、FirefoxとIE11で働いていた：

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>SVG Fragment</title> 
    <style type="text/css"> 
    body { 
    background: url("tiletest.svg#svgView(viewBox(120,32,30,32))"); 
    background-size: 30px 32px; 
    } 
    </style> 
</head> 
<body> 
    <h1>SVG Fragment</h1> 
</body> 
</html>

< /更新>

物事のカップルは、インラインビューボックスのサポートはすべてのブラウザではありませんがあり、まだ...と、多くの場合、癖を（下部にあるリンクを参照）が...他には、ビューボックスがあるということですx-min y-min width height ... yそれはx1 y1 x2 y2だと思っていたようです。

background: url("tiletest.svg#svgView(viewBox(120 32 30 32))");をChromeで動作させるには... view要素を使用してFirefoxで動作させる必要があるかもしれませんが、

Opera Miniなどのブラウザを除くすべての最新のブラウザで、以下のような機能を実装する別の方法を示しました。それはあなたにいくつかのアイデアを与えることを望みます。

.svg-background { 
 
    height: 200px; 
 
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='120 32 30 32'%3E%3ClinearGradient id='grad' x2='100' y2='100' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23E7FF00'/%3E%3Cstop offset='1' stop-color='%23F00'/%3E%3C/linearGradient%3E%3Cpath d='M0 0h100v100H0z' fill='url(%23grad)'/%3E%3Cpath d='M174.68 0l16.24 32.92 36.33 5.28-26.29 25.62 6.21 36.18-32.49-17.08L142.19 100l6.2-36.18-26.28-25.62 36.32-5.28z' fill='%2313FF00'/%3E%3Ccircle cx='310' cy='50' r='50' fill='%232732FF'/%3E%3C/svg%3E"); 
 
}

<svg xmlns="http://www.w3.org/2000/svg" width="100" viewBox="0 0 360 100"> 
 
    <linearGradient id="grad" x2="100" y2="100" gradientUnits="userSpaceOnUse"> 
 
    <stop offset="0" stop-color="#E7FF00"/> 
 
    <stop offset="1" stop-color="#F00"/> 
 
    </linearGradient> 
 
    <path d="M0 0h100v100H0z" fill="url(#grad)"/> 
 
    <path d="M174.68 0l16.24 32.92 36.33 5.28-26.29 25.62 6.21 36.18-32.49-17.08L142.19 100l6.2-36.18-26.28-25.62 36.32-5.28z" fill="#13FF00"/> 
 
    <circle cx="310" cy="50" r="50" fill="#2732FF"/> 
 
</svg> 
 

 
<div class="svg-background"> 
 
    
 
</div>

参考資料：

Mozilla Developer Network (MDN) Viewbox page
CanIUse.com svg fragment identifiers
また、私はまだに見ていないSVG view elementをチェックしてください。
ラブ・ダイアリーズthe page on CSSTricks about fragment identifers
とfragment identifier testbed codepen

出典

2017-01-23 17:32:07 Ruskin

https://zslabs.com/articles/svg-background-fill/のLESS mixinの修正版を使用して、CSSでエンコードされた背景画像を生成しました。同様のSASSミックスインが利用可能です – Ruskin

...そしてsvgを最適化しましたhttps://jakearchibald.github.io/svgomg/から手で終了して終了します – Ruskin

CSSの背景にSVGスプライトのタイルを正しく作成するにはどうしたらいいですか？

答えて

<更新>

< /更新>

参考資料：

関連する問題