Boyama SVG içerik URL

Question

ben bu kadarını bir düğme vardır:

<button class="buttonclass"><i class="iconclass plus-icon"></i></button> 

Benim css sınıfları

şuna benzer:

.buttonclass { 
    width: 30px; 
    height: 30px; 
    text-align: center; 
    position: relative; 
    border-radius: 20px; 
    background-color: #1DBE60 
} 

.iconclass { 
    width: 20px; 
    height: 20px; 
    margin: 7.5px; 
} 

.buttonclass .iconclass { 
    margin: 0; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 

.plus-icon { 
    content: url(http://uxrepo.com/static/icon-sets/mfg-labs/svg/plus.svg); 
} 

nasıl 'artı-rengini değiştirebilirsiniz Bir SVG ise css ile simgesi? Size bunun yerine svg inline koymak ancak <use> öğesi kullanılarak düşünmek zorundayız http://plnkr.co/edit/6fLYQlpFmDdf7aWenBtp?p=preview

Answer 1

: Ben burada

bir gümlemek vb svg sınıflar, renk sınıfları, arka plan-sınıfları, dolgu ekleyerek denedim bunu başvurarak bir simge birden zamanı kullanabilirsiniz:

http://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/

Answer 2

sen (artı simgesinin renk için) ekstra bir sınıf eklemek için mutluysan o zaman burada currentColor CSS değişkeni kullanılarak CSS-tek çözüm :

.buttonclass { 
 
    width: 30px; 
 
    height: 30px; 
 
    text-align: center; 
 
    position: relative; 
 
    border-radius: 20px; 
 
    background-color: #1DBE60 
 
} 
 

 
.iconclass { 
 
    width: 20px; 
 
    height: 20px; 
 
    margin: 7.5px; 
 
} 
 

 
.buttonclass .iconclass { 
 
    margin: 0; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
.plus-icon { 
 
background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><rect x="0" y="0" width="8" height="8" fill="rgb(29,190,96)" /><rect x="0" y="12" width="8" height="8" fill="rgb(29,190,96)" /><rect x="12" y="0" width="8" height="8" fill="rgb(29,190,96)" /><rect x="12" y="12" width="8" height="8" fill="rgb(29,190,96)" /></svg>'); 
 
background-color: currentColor; 
 
border: 1px solid rgb(29,190,96); 
 
border-radius: 15px; 
 
} 
 

 
.white { 
 
color: rgb(255,255,255); 
 
} 
 

 
.yellow { 
 
color: rgb(255,255,0); 
 
} 
 

 
.green { 
 
color: rgb(0,255,0); 
 
}

<button class="buttonclass"><i class="iconclass plus-icon white"></i></button> 
 
<button class="buttonclass"><i class="iconclass plus-icon yellow"></i></button> 
 
<button class="buttonclass"><i class="iconclass plus-icon green"></i></button>

Answer 3

Bir svg simgesi renklendirmek için bir yol arıyoruz burada bitti. En çok oylanan cevap bana yardımcı olmadı, bu yüzden bazı ilginç kişilerden sonra bu ilginç codepen'a rastladım.

Uzun lafın kısası ben bu css kullanarak svg simgesini renkli:

.plus-icon { 
    -webkit-mask: url('../images/plus.svg') no-repeat 50% 50%; 
    mask: url('../images/plus.svg') no-repeat 50% 50%; 
    -webkit-mask-size: cover; 
    mask-size: cover; 
} 

.white { 
    background-color: rgb(255,255,255); 
} 

Güncelleme:

IE ile çalışmıyor.