CSSの埋め込みSVGでクラスを使用する

私は現在、いくつかの基本的なSVGをデータURIとしてCSSに埋め込むことで遊んでいます - hereと同様です。CSSの埋め込みSVGでクラスを使用する

すべてこれは私がしようとすると、内部パスのいずれかを対象とするクラスを持っている場合を除き、正常に動作します：

.alter { 
    fill:red; 
} 
.caretDown { 
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11 10.07h-5.656l5.656-5.656v5.656z' class='alter' /%3E%3C/svg%3E"); 
}

今、これは動作していないようですが、私は私にプレーンSVGとしてこれを行う場合HTML、それが正常に動作します：

<body> 
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"> 
     <path d="M11 10.07h-5.656l5.656-5.656v5.656z" class="alter"/> 
    </svg> 
</body>

は最終的に私は（テキストとインライン化する際に、より良い動作しているようです）私は、背景画像としてそれらを使用できるように、このようにSVGsを埋め込むしようとしていると私はコントロールしたいですよ私は、ターゲット/スコープセレクタを切り替えることによって色を変えることができるように、クラスを通して）テーマとして身体に適用されるdarkとlight RE：

.dark .alter { 
    fill:red; 
} 
.light .alter { 
    fill:red; 
}

私は、これが機能しない理由の周りにいくつかの理論を持っているが、私は理由として、具体的な何かを見つけることができません。

出典

2016-07-29 anthonyv

あなたは解決策を見つけることに終わるでしたか？私は同じ問題に直面している。私が見つけることができるすべてのソリューションは、背景色のマスクを使用して示唆していますが、複数の色が必要な場合はそれは役に立ちません。 http://stackoverflow.com/a/16358386/4946681 – Nate

SASSのようなCSSプリプロセッサを使用している場合は、塗りつぶしの色を渡し、渡された色を塗りつぶしとしてSVGを返す小さな関数を書くことができます。

@function caret-down-icon-svg($fill: '111') { 
    @return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M11 10.07h-5.656l5.656-5.656v5.656z" fill="#{$fill}"/></svg>'; 
} 

.caretDown { 
    background-image: url("data:image/svg+xml;utf8, #{svg-fill($caret-down-icon-svg)}"); 

    &.light { 
    background-image: url("data:image/svg+xml;utf8, #{svg-fill($caret-down-icon-svg, ccc)}"); 
    } 
}

Here's the Pen

出典

2016-07-29 18:43:23 Chris

私はそれについて考えましたが、最終的にはCSSのSVGを複製し、最後に送信する必要があるバイト数を2倍にします。 – anthonyv

CSSの埋め込みSVGでクラスを使用する

答えて

関連する問題