html - पृष्ठभूमि-छवि के रूप में कार्य किए जाने पर एसवीजी भरने के रंग को संशोधित करें




css html5 (10)

अब आप इस तरह क्लाइंट पक्ष पर इसे प्राप्त कर सकते हैं:

var green = '3CB54A';
var red = 'ED1F24';
var svg = '<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="320px" height="100px" viewBox="0 0 320 100" enable-background="new 0 0 320 100" xml:space="preserve"> <polygon class="mystar" fill="#'+green+'" points="134.973,14.204 143.295,31.066 161.903,33.77 148.438,46.896 151.617,65.43 134.973,56.679 118.329,65.43 121.507,46.896 108.042,33.77 126.65,31.066 "/><circle class="mycircle" fill="#'+red+'" cx="202.028" cy="58.342" r="12.26"/></svg>';      
var encoded = window.btoa(svg);
document.body.style.background = "url(data:image/svg+xml;base64,"+encoded+")";

यहाँ बेवकूफ!

एसवीजी आउटपुट को सीधे पृष्ठ कोड के साथ इनलाइन में रखते हुए मैं सीएसएस के साथ भरने वाले रंगों को बस संशोधित करने में सक्षम हूं:

polygon.mystar {
    fill: blue;
}​

circle.mycircle {
    fill: green;
}

यह बहुत अच्छा काम करता है, हालांकि मैं एक एसवीजी की "भरें" विशेषता को संशोधित करने का एक तरीका ढूंढ रहा हूं जब इसे पृष्ठभूमि-छवि के रूप में कार्य किया जा रहा है।

html {      
    background-image: url(../img/bg.svg);
}

मैं अब रंग कैसे बदल सकता हूं? क्या यह भी संभव है?

संदर्भ के लिए, मेरी बाहरी एसवीजी फ़ाइल की सामग्री यहां दी गई है:

<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="320px" height="100px" viewBox="0 0 320 100" enable-background="new 0 0 320 100" xml:space="preserve">
<polygon class="mystar" fill="#3CB54A" points="134.973,14.204 143.295,31.066 161.903,33.77 148.438,46.896 151.617,65.43 134.973,56.679 
    118.329,65.43 121.507,46.896 108.042,33.77 126.65,31.066 "/>
<circle class="mycircle" fill="#ED1F24" cx="202.028" cy="58.342" r="12.26"/>
</svg>

आप 'मुखौटा' संपत्ति के साथ, सीएसएस मास्क का उपयोग कर सकते हैं, आप एक मुखौटा बनाते हैं जो किसी तत्व पर लागू होता है।

.icon {
    background-color: red;
    -webkit-mask-image: url(icon.svg);
    mask-image: url(icon.svg);
}

अधिक जानने के लिए इस महान लेख को देखें: https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images


आप एक चर में एसवीजी स्टोर कर सकते हैं। फिर अपनी जरूरतों के आधार पर एसवीजी स्ट्रिंग में हेरफेर करें (यानी, चौड़ाई, ऊंचाई, रंग, आदि सेट करें)। फिर पृष्ठभूमि सेट करने के लिए परिणाम का उपयोग करें, उदाहरण के लिए

$circle-icon-svg: '<svg xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="10" /></svg>';

$icon-color: #f00;
$icon-color-hover: #00f;

@function str-replace($string, $search, $replace: '') {
    $index: str-index($string, $search);

    @if $index {
        @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
    }

    @return $string;
}

@function svg-fill ($svg, $color) {
  @return str-replace($svg, '<svg', '<svg fill="#{$color}"');
}

@function svg-size ($svg, $width, $height) {
  $svg: str-replace($svg, '<svg', '<svg width="#{$width}"');
  $svg: str-replace($svg, '<svg', '<svg height="#{$height}"');

  @return $svg;
}

.icon {
  $icon-svg: svg-size($circle-icon-svg, 20, 20);

  width: 20px; height: 20px; background: url('data:image/svg+xml;utf8,#{svg-fill($icon-svg, $icon-color)}');

  &:hover {
    background: url('data:image/svg+xml;utf8,#{svg-fill($icon-svg, $icon-color-hover)}');
  }
}

मैंने डेमो भी बनाया है, http://sassmeister.com/gist/4cf0265c5d0143a9e734

यह कोड एसवीजी के बारे में कुछ धारणाएं बनाता है, उदाहरण के लिए <svg /> तत्व में मौजूदा भरने वाला रंग नहीं है और न तो चौड़ाई या ऊंचाई गुण सेट हैं। चूंकि एससीएसएस दस्तावेज़ में इनपुट हार्डकोड किया गया है, इसलिए इन बाधाओं को लागू करना काफी आसान है।

कोड डुप्लिकेशन के बारे में चिंता मत करो। gzip संपीड़न अंतर नगण्य बनाता है।


कुछ (बहुत विशिष्ट) परिस्थितियों में यह filter का उपयोग करके हासिल किया जा सकता है। उदाहरण के लिए, आप filter: hue-rotate(45deg); का उपयोग करके 45 डिग्री रंग को घुमाने के द्वारा एक नीली एसवीजी छवि बैंगनी में बदल सकते हैं filter: hue-rotate(45deg); 45 डिग्री filter: hue-rotate(45deg); । ब्राउज़र समर्थन न्यूनतम है लेकिन यह अभी भी एक दिलचस्प तकनीक है।

Demo


फिर भी एक और दृष्टिकोण मुखौटा का उपयोग करना है। फिर आप मास्क किए गए तत्व का पृष्ठभूमि रंग बदलते हैं। Svg के fill विशेषता को बदलने के समान प्रभाव पड़ता है।

HTML:

<glyph class="star"/>
<glyph class="heart" />
<glyph class="heart" style="background-color: green"/>
<glyph class="heart" style="background-color: blue"/>

सीएसएस:

glyph {
    display: inline-block;
    width:  24px;
    height: 24px;
}

glyph.star {
  -webkit-mask: url(star.svg) no-repeat 100% 100%;
  mask: url(star.svg) no-repeat 100% 100%;
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: yellow;
}

glyph.heart {
  -webkit-mask: url(heart.svg) no-repeat 100% 100%;
  mask: url(heart.svg) no-repeat 100% 100%;
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: red;
}

आपको यहां एक पूर्ण ट्यूटोरियल मिलेगा: http://codepen.io/noahblon/blog/coloring-svgs-in-css-background-images (मेरा स्वयं नहीं)। यह विभिन्न दृष्टिकोणों (मास्क तक सीमित नहीं) का प्रस्ताव करता है।


बहुत सारे आईएफ, लेकिन यदि आपका प्री बेस 64 एन्कोडेड एसवीजी शुरू होता है:

<svg fill="#000000

फिर बेस 64 एन्कोडेड स्ट्रिंग शुरू हो जाएगी:

PHN2ZyBmaWxsPSIjMDAwMDAw

यदि पूर्व-एन्कोडेड स्ट्रिंग शुरू होती है:

<svg fill="#bfa76e

तो यह इस पर एन्कोड करता है:

PHN2ZyBmaWxsPSIjYmZhNzZl

एन्कोडेड स्ट्रिंग दोनों ही शुरू होते हैं:

PHN2ZyBmaWxsPSIj

बेस 64 एन्कोडिंग का क्विर्क प्रत्येक 3 इनपुट वर्ण 4 आउटपुट वर्ण बन जाता है। इस तरह से शुरू होने वाले एसवीजी के साथ 6-वर्ण हेक्स भरने का रंग बिल्कुल एन्कोडिंग ब्लॉक 'सीमा' पर शुरू होता है। इसलिए आप आसानी से एक क्रॉस-ब्राउज़र जेएस प्रतिस्थापित कर सकते हैं:

output = input.replace(/MDAwMDAw/, "YmZhNzZl");

लेकिन उपरोक्त tnt-rox उत्तर आगे बढ़ने का तरीका है।


मुझे लगता है कि ऐसा करने का एकमात्र तरीका कुछ सर्वर साइड तंत्र से अपने एसवीजी की सेवा करना है। बस एक संसाधन सर्वर पक्ष बनाएं जो आपके पैरागेट को जीईटी पैरामीटर के अनुसार आउटपुट करता है, और आप इसे एक निश्चित यूआरएल पर सेवा देते हैं।

फिर आप अपने सीएसएस में उस यूआरएल का उपयोग करें।

क्योंकि पृष्ठभूमि आईएमजी के रूप में, यह डीओएम का हिस्सा नहीं है और आप इसका उपयोग नहीं कर सकते हैं। एक और संभावना नियमित रूप से इसका उपयोग करना होगा, इसे सामान्य रूप से किसी पृष्ठ में एम्बेड करें, लेकिन इसे पूरी तरह से स्थिति दें, इसे पृष्ठ की पूर्ण चौड़ाई और ऊंचाई बनाएं और फिर अन्य सभी DOM तत्वों के पीछे रखने के लिए z-index css प्रॉपर्टी का उपयोग करें एक पेज पर


यह मेरी पसंदीदा विधि है, लेकिन आपका ब्राउज़र समर्थन बहुत प्रगतिशील होना चाहिए। मास्क प्रॉपर्टी के साथ आप एक मुखौटा बनाते हैं जो किसी तत्व पर लागू होता है। हर जगह मुखौटा अपारदर्शी, या ठोस है, अंतर्निहित छवि के माध्यम से दिखाता है। जहां यह पारदर्शी है, अंतर्निहित छवि मुखौटा, या छुपा हुआ है। एक सीएसएस मास्क-छवि के लिए वाक्यविन्यास पृष्ठभूमि-छवि के समान है। कोडेन mask


सास के साथ यह संभव है! केवल एक चीज जो आपको करना है वह है अपने एसवीजी कोड को यूआरएल-एन्कोड करना। और यह सास में एक सहायक समारोह के साथ संभव है। मैंने इसके लिए एक कोडेन बनाया है। इसे देखो:

http://codepen.io/philippkuehn/pen/zGEjxB

// choose a color

$icon-color: #F84830;


// functions to urlencode the svg string

@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);
  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }
  @return $string;
}

@function url-encode($string) {
  $map: (
    "%": "%25",
    "<": "%3C",
    ">": "%3E",
    " ": "%20",
    "!": "%21",
    "*": "%2A",
    "'": "%27",
    '"': "%22",
    "(": "%28",
    ")": "%29",
    ";": "%3B",
    ":": "%3A",
    "@": "%40",
    "&": "%26",
    "=": "%3D",
    "+": "%2B",
    "$": "%24",
    ",": "%2C",
    "/": "%2F",
    "?": "%3F",
    "#": "%23",
    "[": "%5B",
    "]": "%5D"
  );
  $new: $string;
  @each $search, $replace in $map {
    $new: str-replace($new, $search, $replace);
  }
  @return $new;
}

@function inline-svg($string) {
  @return url('data:image/svg+xml;utf8,#{url-encode($string)}');
}


// icon styles
// note the fill="' + $icon-color + '"

.icon {
  display: inline-block;
  width: 50px;
  height: 50px;
  background: inline-svg('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
<path fill="' + $icon-color + '" d="M18.7,10.1c-0.6,0.7-1,1.6-0.9,2.6c0,0.7-0.6,0.8-0.9,0.3c-1.1-2.1-0.4-5.1,0.7-7.2c0.2-0.4,0-0.8-0.5-0.7
  c-5.8,0.8-9,6.4-6.4,12c0.1,0.3-0.2,0.6-0.5,0.5c-0.6-0.3-1.1-0.7-1.6-1.3c-0.2-0.3-0.4-0.5-0.6-0.8c-0.2-0.4-0.7-0.3-0.8,0.3
  c-0.5,2.5,0.3,5.3,2.1,7.1c4.4,4.5,13.9,1.7,13.4-5.1c-0.2-2.9-3.2-4.2-3.3-7.1C19.6,10,19.1,9.6,18.7,10.1z"/>
</svg>');
}

 .icon { 
  width: 48px;
  height: 48px;
  display: inline-block;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg) no-repeat 50% 50%; 
  background-size: cover;
}

.icon-orange { 
  -webkit-filter: hue-rotate(40deg) saturate(0.5) brightness(390%) saturate(4); 
  filter: hue-rotate(40deg) saturate(0.5) brightness(390%) saturate(4); 
}

.icon-yellow {
  -webkit-filter: hue-rotate(70deg) saturate(100);
  filter: hue-rotate(70deg) saturate(100);
}

कोडेन लेख और डेमो





svg