แก้ไขสีเติม SVG เมื่อใช้เป็นภาพพื้นหลัง

การวางเอาต์พุต SVG โดยตรงโดยใช้โค้ดเพจฉันสามารถแก้ไขสีเติมด้วย CSS ได้เช่น:

polygon.mystar {
    fill: blue;
}​

circle.mycircle {
    fill: green;
}

สิ่งนี้ใช้งานได้ดี แต่ฉันกำลังมองหาวิธีในการแก้ไขแอตทริบิวต์ "เติม" ของ SVG เมื่อมันถูกใช้เป็นแบ็คกราวด์ - ภาพ

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

ฉันจะเปลี่ยนสีได้อย่างไรตอนนี้ เป็นไปได้ไหม

สำหรับการอ้างอิงต่อไปนี้เป็นเนื้อหาของไฟล์ 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>

วิธีหนึ่งในการทำเช่นนี้คือการให้บริการ svg ของคุณจากกลไกด้านเซิร์ฟเวอร์ เพียงสร้างฝั่งเซิร์ฟเวอร์ทรัพยากรที่ส่งออก svg ของคุณตามพารามิเตอร์ GET และคุณให้บริการใน url ที่แน่นอน

จากนั้นคุณเพียงใช้ URL นั้นใน css ของคุณ

เนื่องจากเป็นฉากหลัง img มันไม่ได้เป็นส่วนหนึ่งของ DOM และคุณไม่สามารถจัดการได้ ความเป็นไปได้อีกอย่างหนึ่งคือการใช้งานเป็นประจำฝังไว้ในหน้าเว็บตามปกติ แต่จัดวางอย่างสมบูรณ์ทำให้เต็มความกว้าง & สูงของหน้าแล้วใช้คุณสมบัติดัชนี z css เพื่อวางองค์ประกอบ DOM อื่น ๆ ทั้งหมด บนหน้า

ฉันต้องการสิ่งที่คล้ายกันและต้องการติดกับ CSS นี่คือ LESS และ SCSS mixins รวมถึง CSS ธรรมดาที่สามารถช่วยคุณได้ น่าเสียดายที่การสนับสนุนเบราว์เซอร์ค่อนข้างหละหลวม ดูรายละเอียดด้านล่างเกี่ยวกับการสนับสนุนเบราว์เซอร์

น้อยกว่า mixin:

.element-color(@color) {
  background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="@{color}" ... /></g></svg>');
}

การใช้งานน้อย:

.element-color(#fff);

SCSS mixin:

@mixin element-color($color) {
  background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="#{$color}" ... /></g></svg>');
}

การใช้งาน SCSS:

@include element-color(#fff);

CSS:

// color: red
background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="red" ... /></g></svg>');

นี่คือข้อมูลเพิ่มเติมเกี่ยวกับการฝังรหัส SVG แบบเต็มลงในไฟล์ CSS ของคุณ นอกจากนี้ยังกล่าวถึงความเข้ากันได้ของเบราว์เซอร์ซึ่งเล็กเกินไปสำหรับสิ่งนี้ที่จะเป็นตัวเลือกที่ทำงานได้

คุณสามารถใช้หน้ากาก CSS ได้ด้วยคุณสมบัติ 'หน้ากาก' คุณสามารถสร้างหน้ากากที่ใช้กับองค์ประกอบได้

.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

อีกวิธีหนึ่งคือใช้หน้ากาก จากนั้นคุณเปลี่ยนสีพื้นหลังขององค์ประกอบที่ถูกหลอกลวง สิ่งนี้มีผลเหมือนกับการเปลี่ยนแอ็ตทริบิวต์การเติมของ svg

HTML:

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

CSS:

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 (ไม่ใช่ของฉัน) มันเสนอวิธีการที่หลากหลาย (ไม่ จำกัด เพียงหน้ากาก)

เป็นไปได้กับ Sass! สิ่งเดียวที่คุณต้องทำคือเข้ารหัส url-svg ของคุณ และนี่เป็นไปได้ด้วยฟังก์ชั่นตัวช่วยใน Sass ฉันทำโคเดเพนสำหรับเรื่องนี้ ดูนี่สิ:

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 ของคุณเป็นข้อความ

แก้ไขข้อความ svg ของคุณโดยใช้ javascript เพื่อเปลี่ยนสี / ลายเส้น / สีเติม [s]

แล้วฝัง SVG สตริงอินไลน์เข้าไปแก้ไข CSS ตามที่อธิบายไว้ที่นี่

ตอนนี้คุณสามารถทำสิ่งนี้ได้ในฝั่งไคลเอ็นต์ดังนี้:

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+")";

เล่นซอที่นี่!

คุณสามารถจัดเก็บ SVG ไว้ในตัวแปรได้ จากนั้นจัดการสตริง SVG ขึ้นอยู่กับความต้องการของคุณ (เช่นตั้งค่าความกว้างความสูงสี ฯลฯ ) จากนั้นใช้ผลลัพธ์เพื่อตั้งค่าพื้นหลังเช่น

$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 http://sassmeister.com/gist/4cf0265c5d0143a9e734

รหัสนี้มีข้อสมมติฐานบางประการเกี่ยวกับ SVG เช่นนั้น <svg />องค์ประกอบนั้นไม่มีสีเติมที่มีอยู่และไม่มีการตั้งค่าคุณสมบัติความกว้างหรือความสูง เนื่องจากอินพุตถูกฮาร์ดโค้ดในเอกสาร SCSS จึงค่อนข้างง่ายในการบังคับใช้ข้อ จำกัด เหล่านี้

ไม่ต้องกังวลกับการทำสำเนารหัส gzip การบีบอัดทำให้ความแตกต่างเล็กน้อย

คุณสามารถสร้างฟังก์ชั่น SCSS ของคุณเองสำหรับสิ่งนี้ การเพิ่มสิ่งต่อไปนี้ในไฟล์ config.rb ของคุณ

require 'sass'
require 'cgi'

module Sass::Script::Functions

  def inline_svg_image(path, fill)
    real_path = File.join(Compass.configuration.images_path, path.value)
    svg = data(real_path)
    svg.gsub! '{color}', fill.value
    encoded_svg = CGI::escape(svg).gsub('+', '%20')
    data_url = "url('data:image/svg+xml;charset=utf-8," + encoded_svg + "')"
    Sass::Script::String.new(data_url)
  end

private

  def data(real_path)
    if File.readable?(real_path)
      File.open(real_path, "rb") {|io| io.read}
    else
      raise Compass::Error, "File not found or cannot be read: #{real_path}"
    end
  end

end

จากนั้นคุณสามารถใช้มันใน CSS ของคุณ:

.icon {
  background-image: inline-svg-image('icons/icon.svg', '#555');
}

คุณจะต้องแก้ไขไฟล์ SVG ของคุณและแทนที่คุณสมบัติการเติมใด ๆ ในมาร์กอัพด้วย fill = "{color}"

เส้นทางไอคอนจะสัมพันธ์กับพารามิเตอร์ images_dir ของคุณเสมอในไฟล์ config.rb เดียวกัน

คล้ายกับโซลูชันอื่น ๆ แต่นี่ค่อนข้างสะอาดและทำให้ไฟล์ SCSS ของคุณเป็นระเบียบ!

ในบางสถานการณ์ (ที่เฉพาะเจาะจงมาก) นี่อาจทำได้โดยการใช้ตัวกรอง ตัวอย่างเช่นคุณสามารถเปลี่ยนภาพ SVG สีฟ้าสีม่วงสีโดยการหมุน 45 filter: hue-rotate(45deg);องศาใช้ การสนับสนุนเบราว์เซอร์มีน้อย แต่ก็ยังเป็นเทคนิคที่น่าสนใจ

การสาธิต

สำหรับพื้นหลังขาวดำคุณสามารถใช้ svg กับหน้ากากซึ่งควรแสดงสีพื้นหลัง

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" preserveAspectRatio="xMidYMid meet" focusable="false" style="pointer-events: none; display: block; width: 100%; height: 100%;" >
    <defs>
        <mask id="Mask">
            <rect width="100%" height="100%" fill="#fff" />
            <polyline stroke-width="2.5" stroke="black" stroke-linecap="square" fill="none" transform="translate(10.373882, 8.762969) rotate(-315.000000) translate(-10.373882, -8.762969) " points="7.99893906 13.9878427 12.7488243 13.9878427 12.7488243 3.53809523"></polyline>
        </mask>
    </defs>
    <rect x="0" y="0" width="20" height="20" fill="white" mask="url(#Mask)" />
</svg>

และกว่าใช้ CSS นี้

background-repeat: no-repeat;
background-position: center center;
background-size: contain;
background-image: url(your/path/to.svg);
background-color: var(--color);

ใช้ตัวกรองซีเปียพร้อมเฉดสีหมุนความสว่างและความอิ่มตัวของสีเพื่อสร้างสีใด ๆ ที่เราต้องการ

.colorize-pink {
  filter: brightness(0.5) sepia(1) hue-rotate(-70deg) saturate(5);
}

https://css-tricks.com/solved-with-css-colorizing-svg-backgrounds/

มาถึงสายการแสดงที่นี่ แต่ฉันสามารถเพิ่มสีเติมลงในรูปหลายเหลี่ยม SVG หากคุณสามารถแก้ไขรหัส SVG ได้โดยตรงตัวอย่างเช่น svg ต่อไปนี้แสดงผลสีแดงแทนที่จะเป็นสีดำเริ่มต้น ฉันยังไม่ได้ทดสอบนอก Chrome แม้ว่า:

<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="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
    <polygon 


        fill="red"


        fill-rule="evenodd" clip-rule="evenodd" points="452.5,233.85 452.5,264.55 110.15,264.2 250.05,390.3 229.3,413.35 
47.5,250.7 229.3,86.7 250.05,109.75 112.5,233.5 "/>
</svg>

นี่เป็นวิธีที่ฉันโปรดปราน แต่การสนับสนุนเบราว์เซอร์ของคุณต้องก้าวหน้ามาก ด้วยคุณสมบัติรูปแบบคุณสร้างรูปแบบที่ใช้กับองค์ประกอบ ทุกหนทุกแห่งหน้ากากจะทึบหรือทึบภาพต้นแบบแสดงผ่าน ในกรณีที่โปร่งใสรูปภาพที่ซ่อนอยู่จะถูกปกปิดหรือซ่อน ไวยากรณ์สำหรับ CSS mask-image คล้ายกับ background-image ดู codepenmask

IFs จำนวนมาก แต่ถ้า SVG พื้นฐานของคุณเข้ารหัส 64 เริ่มต้น:

<svg fill="#000000

จากนั้นสตริงที่เข้ารหัส base64 จะเริ่มขึ้น:

PHN2ZyBmaWxsPSIjMDAwMDAw

หากสตริงที่เข้ารหัสล่วงหน้าเริ่มต้น:

<svg fill="#bfa76e

ดังนั้นสิ่งนี้จะเข้ารหัสไปที่:

PHN2ZyBmaWxsPSIjYmZhNzZl

สตริงที่เข้ารหัสทั้งสองเริ่มต้นเหมือนกัน:

PHN2ZyBmaWxsPSIj

การเล่นโวหารของการเข้ารหัส base64 คืออักขระอินพุต 3 ตัวทุกตัวกลายเป็นอักขระเอาต์พุต 4 ตัว เมื่อ SVG เริ่มต้นเช่นนี้แล้วสีเติมตัวอักษรฐานสิบหกหกตัวจะเริ่มตรงกับ 'ขอบเขต' ของการเข้ารหัส ดังนั้นคุณสามารถแทนที่เบราว์เซอร์ JS ได้อย่างง่ายดาย:

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

แต่คำตอบ tnt-rox ข้างต้นเป็นวิธีที่จะก้าวไปข้างหน้า