web-dev-qa-db-ja.com

CSSの背景画像をインラインSVGシンボルに設定しますか？

外部svgファイルを背景画像にリンクできることは知っています。

background-image: url(Icon.svg);

シンボルIDは、外部svgファイルからターゲットにできます。

background-image: url(Icons.svg#Icon-Menu);

しかし、どうすれば背景画像をインライン svgシンボルに設定できますか？ （以下のように）

私のsvgはWebページの本文の上部にあり、外部ファイルにはありません。

- が欲しいです .test背景画像は#Icon-Menuシンボル。

.test{
  background:#ddd url('../#Icon-Menu');
  height:100px;
  width:100px;
  display:block;
}
<div style="height: 0; width: 0; position: absolute; visibility: hidden;">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <symbol id="Icon-Menu" viewBox="0 0 512 512">
      <title>Menu</title>
      <path d="M93.417,5.333H6.583c-1.654,0-3,1.346-3,3v13.334c0,1.654,1.346,3,3,3h86.833c1.654,0,3-1.346,3-3V8.333  C96.417,6.679,95.071,5.333,93.417,5.333z" />
      <path d="M93.417,40.333H6.583c-1.654,0-3,1.346-3,3v13.334c0,1.654,1.346,3,3,3h86.833c1.654,0,3-1.346,3-3V43.333        C96.417,41.679,95.071,40.333,93.417,40.333z" />
      <path d="M93.417,75.333H6.583c-1.654,0-3,1.346-3,3v13.334c0,1.654,1.346,3,3,3h86.833c1.654,0,3-1.346,3-3V78.333        C96.417,76.679,95.071,75.333,93.417,75.333z" />
    </symbol>
  </svg>
</div>

<div class="test"></div>
htmlcsscss3svgicons
30
DreamTeK

画像は完全なファイルである必要があります。

SVG仕様 ...から.

「image」要素は、完全なファイルのコンテンツがレンダリングされることを示します...

同じことが背景画像などにも当てはまります。

6
Robert Longson

ロバート・ロングソン

そのとおり。しかし、あなたはこの方法でそれを行うことができます。しかし、シンボルはそれが機能する方法ではありません。残念ながら、参照するには「g」などを使用する必要があります。

body {
  background: url(http://www.broken-links.com/tests/images/faces.svg#devil-view);
}

http://codepen.io/Type-Style/pen/ByvKJq

Svgがマークアップにある場合は機能しません。

5
Type-Style

（1）インラインSVGで可能な1つの方法は、シンボルとDIV絶対レイヤーを使用することです。

<a class="preview-modal__device-icon-link" ng-click="setPreviewWidth('phone')">
   <svg class="preview-modal__device-icon"><use xlink:href="#icon-phone">
   </use></svg>
</a>

（2）2番目の解決策は、データURIを使用することです。ここに適切な情報があります。 https://css-tricks.com/using-svg/ このツールを使用： Mobilefish .comオンライン変換ツール

CSS：

.logo {
  background: url("data:image/svg+xml;base64,[data]");
}

HTML：

<img src="data:image/svg+xml;base64,[data]">
0
Stxle