सीएसएस के साथ रंग एसवीजी सामग्री यूआरएल

Question

मैं एक बटन इस तरह की स्थापना की है:

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

मेरे सीएसएस वर्गों इस तरह दिखेगा:

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

मैं 'plus- का रंग कैसे बदल सकता हूँ आइकन 'सीएसएस के साथ अगर यह एक एसवीजी है? http://plnkr.co/edit/6fLYQlpFmDdf7aWenBtp?p=preview

Answer 1

आप ताकि आप svg इनलाइन डाल लेकिन इसके बजाय <use> तत्व उपयोग करने पर विचार करने के लिए है: मैं आदि svg करने के लिए कक्षाएं, रंग कक्षाएं, पृष्ठभूमि कक्षाएं, भरने जोड़ने

यहाँ एक खनखनाहट है की कोशिश की है यह संदर्भित द्वारा एक आइकन से अधिक समय का उपयोग कर सकते हैं:

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

Answer 2

आप (प्लस आइकन के रंग के लिए) एक अतिरिक्त वर्ग को जोड़ने के लिए खुश हैं, तो फिर यहाँ currentColor सीएसएस चर का उपयोग कर एक सीएसएस-एकमात्र समाधान है :

.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

मैं एक तरह से एक svg आइकन रंग करने के लिए की तलाश में यहाँ समाप्त हो गया। सबसे ज्यादा वोट देने वाले उत्तर ने मेरी मदद नहीं की, इसलिए कुछ गूंजने के बाद मैं इस दिलचस्प codepen पर आया।

लंबी कहानी कम मैं इस सीएसएस का उपयोग कर मेरी svg आइकन रंग:

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

अद्यतन:

IE के साथ काम नहीं कर।