Verwenden von Klasse auf Pfad in eingebetteten SVG in CSS

Ich spiele derzeit mit dem Einbetten einiger grundlegenden SVGs in meine CSS als Daten-URI - ähnlich wie diskutiert here.Verwenden von Klasse auf Pfad in eingebetteten SVG in CSS

Das alles funktioniert gut, außer wenn ich versuche, und habe eine Klasse, die eine der inneren Pfade Ziele:

.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"); 
}

Nun ist diese nicht zu funktionieren scheint, aber wenn ich dies als eine reine SVG in meinem HTML es funktioniert:

<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>

letztlich die Kontrolle ich versuche, die SVGs auf diese Weise einbinden, so dass ich sie als Hintergrundbilder verwenden können (scheint besser zu funktionieren, wenn sie mit Text inlining) und ich bin zu wollen Dinge über eine Klasse, so dass ich die Farbe ändern kann, indem ich Targeting/Scoped Selektoren (whe re dark und light auf den Körper als Thema angewendet werden):

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

habe ich einige Theorien um, warum dies nicht funktioniert, aber ich kann nichts Konkretes, warum finden.

Quelle

2016-07-29 anthonyv

Haben Sie eine Lösung zu finden am Ende? Ich stehe vor dem gleichen Rätsel. Alle Lösungen, die ich finden kann, schlagen vor, eine Hintergrundfarbenmaske zu verwenden, aber das hilft nicht, wenn Sie mehrere Farben wünschen. http://StackOverflow.com/a/16358386/4946681 – Nate

Wenn Sie einen CSS-Präprozessor wie SASS verwenden, könnten Sie eine kleine Funktion schreiben, in der Sie eine Füllfarbe übergeben und das SVG mit der übergebenen Farbe als Füllung zurückgeben.

@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

Quelle

2016-07-29 18:43:23 Chris

Ya ich dachte darüber nach, aber letztlich dupliziert es die SVGs in meinem CSS und am Ende verdoppelt die Bytes, die ich senden muss. – anthonyv

Verwenden von Klasse auf Pfad in eingebetteten SVG in CSS

Antwort

Verwandte Themen