1

一意のIDを持つ複数のSVGを含むSVGファイルがあります。

<g id="tags">
...
</g>
<g id="tags2">
...
</g>

これまでのところ、私はこの2つの方法をうまく実装しようとしました。背景の位置で設定してみました。

.icon {
  background-image: url(/img/glyphicons_pro/glyphicons/svg/glyphicons.svg);
  background-repeat: no-repeat;
  background-size: 100%;
}

.icon.tags-icon {
  background-position: 0px 0px;
  width: 12px;
  height: 12px;
}

そして最後にSVGのIDを追加してみましたが、どちらも機能していないようです。

.icon.tags-icon {
  background-image: url(/img/glyphicons_pro/glyphicons/svg/glyphicons.svg#tags);
  background-repeat: no-repeat;
  background-size: 80%;
}

私は何時間も探していましたが、これに対する正しいアプローチを見つけることができないようです...

4

1 に答える 1

4

svgフラグメント識別子を使用して、さまざま<g>な要素がさまざまな位置にあると仮定して、さまざまな領域を表示できます。

<html>
<body>
<embed src="shapes.svg#svgView(viewBox(50,0,100,100))" style="width:100px;        height:100px" type="image/svg+xml" />
<embed src="shapes.svg#svgView(viewBox(0,200,100,100))" style="width:100px;height:100px" type="image/svg+xml"/> 
<embed src="shapes.svg#svgView(viewBox(0,400,100,100))" style="width:100px;height:100px" type="image/svg+xml"/>  
</body>
</html>

上記の例は埋め込みを示していますが、この考え方は背景画像にも同様に当てはまります。

もう1つの方法は、SVGスタックです。これは、すべての図面を重ね合わせてから、CSSを使用して見たい図面を表示するだけで機能します。

于 2013-02-02T21:21:46.173 に答える