1

SVG の一部をタイリング背景として使用しようとしています。しかし、私はそれを適切に機能させるのに大きな問題を抱えています。

写真が問題を最もよく表していると思います: デモンストレーション写真

これは私のCSSです：

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 32 150 64 の新しいビューボックスが与えられ、それに応じて背景のサイズが変更されます (ただし、ビューボックスで定義されたsvgは、サイズに関係なくコンテナを埋めるために拡張されるはずなので、とにかくこれは問題にならないはずです.

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

4

1 に答える 1

1

<アップデート>

以下に書いたことは役に立ちますが、問題を完全に解決することはできませんでした。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 を使用すると、Chrome、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>

</更新>

いくつかのこと、インラインビューボックスのサポートはまだすべてのブラウザーにあるわけではありません...そしてしばしば癖があります（下部のリンクを参照）...もう1つは、ビューボックスがx-min y-min width height...あなたはそれがx1 y1 x2 y2.

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

以下に、必要なものを実装する別の方法を示しました。これは、最新のすべてのブラウザー (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>

参考文献：

于 2017-01-23T17:32:07.647 に答える