2

次のように、コンテンツ プロパティのbootstrap-styleを介して、SVG 画像を CSS スプライトとして使用したいと思います。

i.rectangle-image {
  content: url(rectangle.svg);
}

ここに私のSVGがあります：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <rect x="10" y="10" width="80" height="80"/>
</svg>

および提案された HTML:

<div><i class="rectangle-image"></i> Hello, world!</div>

アプリケーションで SVG の色を変更できるようにしたいと考えています。たとえば、アイコンをある場所では紫色に、別の場所では白く表示するようにしたいと考えています。fillタグで異なる属性を設定した 3 つの異なる SVG ファイル (またはデータ URI) を使用することでこれを達成できることはわかってい<rect>ますが、HTML で CSS を使用してこれを行う方法があるかどうか疑問に思っています。

セレクターにfill属性を追加しようとしましたが、うまくいきません。i.rectangle-image

私はこの答えを見てきましたが、それは私が望むものではありません。彼らはページ全体に SVG を埋め込むことを提案していますcontent。何かご意見は？私は運が悪いのでしょうか？

4

3 に答える 3

0

SVG に透明度を与え、css 背景色を使用して背景を塗りつぶすのはどうですか?

@MMM からの提案されたソリューションは素晴らしく見えます。

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="13px" height="12.917px" viewBox="0 0 13 12.917" enable-background="new 0 0 13 12.917" xml:space="preserve">
       <polygon fill="#000000" points="6.504,0 8.509,4.068 13,4.722 9.755,7.887 10.512,12.357 6.504,10.246 2.484,12.357 3.251,7.887 0,4.722 4.492,4.068 "/>
       <script>
         document.getElementsByTagName("polygon")[0].setAttribute("fill", location.hash);
       </script>
</svg>

http://jsbin.com/usaruz/2/edit

http://codepen.io/Elbone/pen/fHCjs

于 2013-05-03T11:56:17.620 に答える
0

SVG Image Editorツールを使用して、フロント エンドで色を編集し、コードをコピーして配置したい場所で使用することができます。これは短期間で済みます。

于 2013-05-22T11:21:25.940 に答える