img src SVG เปลี่ยนสไตล์ด้วย CSS

373

HTML

<img src="logo.svg" alt="Logo" class="logo-img">

CSS

.logo-img path {
  fill: #000;
}

svg โหลดด้านบนและเป็นค่าเริ่มต้นfill: #fffแต่เมื่อฉันใช้ด้านบนcssเพื่อลองเปลี่ยนเป็นสีดำจะไม่เปลี่ยนนี่เป็นครั้งแรกที่ฉันเล่นกับ SVG และฉันไม่แน่ใจว่าทำไมมันไม่ทำงาน

css  image  svg 
— ngplayground
แหล่งที่มา
25
คุณไม่สามารถส่งผลกระทบต่อภาพ SVG แบบนั้นได้ ... เฉพาะองค์ประกอบ SVG แบบอินไลน์
— Paulie_D
1
— อิคารัส
ตรวจสอบคำตอบของฉันที่นี่เพื่อใช้เนื้อหาของ SVG และ CSS stackoverflow.com/questions/11978995/…
— Benjamin
3
— polRk

คำตอบ:

153

หากเป้าหมายของคุณเพียงเพื่อเปลี่ยนสีของโลโก้และคุณไม่จำเป็นต้องใช้ CSS ดังนั้นอย่าใช้ javascript หรือ jquery ตามที่ได้รับคำแนะนำจากคำตอบก่อนหน้านี้

หากต้องการตอบคำถามเดิมอย่างแม่นยำเพียง:

  1. เปิดของคุณlogo.svgในโปรแกรมแก้ไขข้อความ

  2. มองหาfill: #fffและแทนที่ด้วยfill: #000

ตัวอย่างเช่นคุณlogo.svgอาจมีลักษณะเช่นนี้เมื่อเปิดในโปรแกรมแก้ไขข้อความ:

<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
  <path d="M0 0h24v24H0z" fill="none"/>
  <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" fill="#fff"/>
</svg>

... เพียงแค่เปลี่ยนการเติมและบันทึก

— Rowe Morehouse
แหล่งที่มา
6
... และหากไม่มี "การเติม" คุณสามารถเพิ่มลงในpathหรือcircleรายการที่ต้องการ<path fill="#777777" d="m129.774,74.409c-5.523,...ได้
— SaeX
1
เกิดอะไรขึ้นถ้าโลโก้ของฉันมีหนึ่งสีที่ส่วนหัวและอีกสีหนึ่งที่ส่วนท้าย
— rubens.lopes
. @ ruben.lopes สองไฟล์ที่แตกต่างกันหรือสองอินไลน์ที่แตกต่างกันจะง่ายที่สุด
— Rowe Morehouse
11
คุณสามารถใช้fill="currentColor"แล้วใช้colorในองค์ประกอบหลักcss-tricks.com/cascading-svg-fill-color
— Serge
10
เห็นได้ชัดว่าเป็นไปได้และไม่ใช่คำตอบที่เป็นประโยชน์
— Timmmm
102

คุณสามารถตั้งค่า SVG ของคุณเป็นหน้ากาก ด้วยวิธีนี้การตั้งค่าสีพื้นหลังจะทำหน้าที่เป็นสีเติมของคุณ

HTML

<div class="logo"></div>

CSS

.logo {
    background-color: red;
    -webkit-mask: url(logo.svg) no-repeat center;
    mask: url(logo.svg) no-repeat center;
}

JSFiddle: https://jsfiddle.net/KuhlTime/2j8exgcb/
MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/mask

โปรดตรวจสอบว่าเบราว์เซอร์ของคุณรองรับคุณสมบัตินี้: https://caniuse.com/#search=mask

— André Kuhlmann
แหล่งที่มา
3
ดังนั้นสำหรับทุกอย่างยกเว้นเว็บไซต์ภายในใช้ไม่ได้
— Henrik Vendelbo
9
การสนับสนุนทั่วโลก 89% ณ วันที่ 29 พฤษภาคม 2559
— Gajus
1
นี่เป็นวิธีแก้ปัญหาที่น่าทึ่งสำหรับสถานการณ์อย่างที่อธิบายไว้ที่นี่การใช้สิ่งอื่นนอกเหนือจาก data uris ใน css นั้นเป็นเรื่องที่เจ็บปวด ขอบคุณ!
— Gark Garcia
3
มันไม่ทำงาน มันบอกว่าเป็นmask invalid property valueฉันกำลังทดสอบสิ่งนี้ในโครเมี่ยม
— Eren555
1
@MadMac ฉันกำลังใช้งาน Chrome รุ่นเดียวกัน แต่ฉันไม่สามารถทำซ้ำพฤติกรรมนั้นได้ มันเป็น JSFiddle ที่คุณพยายามหรือรหัสของคุณหรือไม่
— André Kuhlmann
78

ลอง CSS บริสุทธิ์:

.logo-img {
  // to black
  filter: invert(1);
  // or to blue
  // filter: invert(1) sepia(1) saturate(5) hue-rotate(175deg);
}

ข้อมูลเพิ่มเติมในบทความนี้https://blog.union.io/code/2017/08/10/img-svg-fill/

— Feri
แหล่งที่มา
การได้รับสีที่แตกต่างบน Edge มากกว่าเบราว์เซอร์อื่นด้วยความพยายามของฉันเมื่อไม่นานมานี้
— Julix
4
ทำงานได้ในเบราว์เซอร์ส่วนใหญ่ แต่ฉันมีปัญหาบางอย่างกับเบราว์เซอร์ IOS-Safari
— Simon Ludwig
30

2018: หากคุณต้องการสีแบบไดนามิกไม่ต้องการใช้จาวาสคริปต์และไม่ต้องการอินไลน์ SVG ให้ใช้ตัวแปร CSS ใช้งานได้ใน Chrome, Firefox และ Safari แก้ไข: และ Edge

<svg>
    <use xlink:href="logo.svg" style="--color_fill: #000;"></use>
</svg>

ใน SVG ของคุณแทนที่กรณีใด ๆกับstyle="fill: #000"style="fill: var(--color_fill)"

— อเมริกาเหนือ
แหล่งที่มา
1
Whats การสนับสนุนเบราว์เซอร์สำหรับสิ่งนี้
— Kevin Goedecke
@KevinGoedecke Chrome, Firefox, Safari และ Edge
— northamerican
4
ดูเหมือนเลิกใช้แล้วในSVG 2
— vsync
5
@northamerican - ลิงก์ไปยังคำตอบ stackoverflow อื่น ๆ เนื่องจาก "หลักฐาน" ไม่เกี่ยวข้อง ทุกคนสามารถเขียนอะไรก็ได้บนแพลตฟอร์มนี้ MDN:"This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped"
— vsync
8
มันดูเหมือนว่าจะเลิกในความโปรดปรานของxlink:href hrefดังนั้นสิ่งนี้อาจยังใช้งานได้
— Benjamin Intal
20

คุณต้องฉีด SVG ลงใน HTML DOM ก่อน

มีไลบรารีโอเพ่นซอร์สชื่อSVGInjectซึ่งทำสิ่งนี้เพื่อคุณ มันใช้onloadคุณลักษณะเพื่อกระตุ้นการฉีด

นี่คือตัวอย่างเล็ก ๆ น้อย ๆ ที่ใช้ SVGInject:

<html>
  <head>
    <script src="svg-inject.min.js"></script>
  </head>
  <body>
    <img src="image.svg" onload="SVGInject(this)" />
  </body>
</html>

หลังจากโหลดภาพแล้วonload="SVGInject(this)จะทำให้เกิดการฉีดและ<img>องค์ประกอบจะถูกแทนที่ด้วยเนื้อหาของไฟล์ SVG ที่ให้ไว้ในsrcแอตทริบิวต์

มันแก้ปัญหาต่าง ๆ ด้วยการฉีด SVG:

  1. สามารถซ่อน SVG ได้จนกว่าการฉีดจะเสร็จสิ้น สิ่งนี้มีความสำคัญหากมีการนำสไตล์ไปใช้แล้วในระหว่างการโหลดซึ่งอาจทำให้ "แฟลชเนื้อหาที่ไม่มีการจัดเรียง" สั้น ๆ

  2. <img>องค์ประกอบฉีดตัวเองโดยอัตโนมัติ หากคุณเพิ่ม SVG แบบไดนามิกคุณไม่ต้องกังวลกับการเรียกฟังก์ชั่นการฉีดอีกครั้ง

  3. สตริงสุ่มจะถูกเพิ่มในแต่ละ ID ใน SVG เพื่อหลีกเลี่ยงการมี ID เดียวกันหลายครั้งในเอกสารหาก SVG ถูกฉีดมากกว่าหนึ่งครั้ง

SVGInject เป็น Javascript ธรรมดาและทำงานได้กับเบราว์เซอร์ทั้งหมดที่รองรับ SVG

คำเตือน: ฉันเป็นผู้เขียนร่วมของ SVGInject

— Waruyama
แหล่งที่มา
3
นี่คือคำตอบที่ตรงไปตรงมาที่สุด ฉันทดสอบใน Chrome, Firefox และ Edge และทำงานได้อย่างสมบูรณ์
— Sébastien Lorion
15

คำตอบจาก @Praveen นั้นแข็งแกร่ง

ฉันไม่สามารถตอบมันในงานของฉันได้ดังนั้นฉันจึงทำฟังก์ชั่นโฮเวอร์ jquery ไว้

CSS

.svg path {
   transition:0.3s all !important;
}

JS / JQuery

// code from above wrapped into a function
replaceSVG();

// hover function
// hover over an element, and find the SVG that you want to change
$('.element').hover(function() {
    var el = $(this);
    var svg = el.find('svg path');
    svg.attr('fill', '#CCC');
}, function() {
    var el = $(this);
    var svg = el.find('svg path');
    svg.attr('fill', '#3A3A3A');
});
— Matt Wujek
แหล่งที่มา
1
มันจะไม่ทำงานถ้า SVG เป็นแบบอินไลน์ที่จะเริ่มต้นด้วย?
— Daniel Thompson
ใช่ แต่ถ้าคุณทำงานกับไฟล์ SVG จำนวนมากหรืออัปเดตเป็นประจำการจัดการเป็นเรื่องยาก
— Matt Wujek
15

ทำไมไม่สร้าง webfont ด้วย svg image หรือ images ของคุณให้นำเข้า webfont ใน css จากนั้นเปลี่ยนสีของ glyph โดยใช้คุณสมบัติ css color? ไม่จำเป็นต้องมีจาวาสคริปต์

— Gringo
แหล่งที่มา
5
หาก svg ของคุณมีองค์ประกอบหลายสีที่แตกต่างกันวิธีนี้จะกลายเป็นแฮ็คมาก (องค์ประกอบหลาย interposed)
— kakaja
1
@kakaja นี่เป็นทางออกสำหรับภาพเวกเตอร์ที่มี 1 สีเท่านั้น ดูคำตอบของ bpulecio สำหรับรายละเอียดเพิ่มเติม
— gringo
1
เพราะไอคอนไม่ใช่ข้อความ แบบอักษรสำหรับข้อความ Svgs สำหรับไอคอน
— Lazar Ljubenović
2
@ LazarLjubenović - ข้อความทางเทคนิคประกอบด้วยอักขระซึ่งเป็นสัญลักษณ์และไอคอนก็เป็นสัญลักษณ์ด้วยเหตุนี้หลายคนจึงไม่มีปัญหาในการใช้ไอคอนแบบอักษร มันก็เหมือนกับการสร้างภาษาต้นฉบับ "อีก" ภาษาจีนกลางใช้ "ไอคอน" และไม่ใช่ตัวอักษรมันไม่ใช่เรื่องแปลกที่มนุษยชาติจะใช้ไอคอนเป็น "ข้อความ"
— vsync
1
ในขณะที่ฟังดูเหมือนเป็นวิธีแก้ปัญหาที่น่าสนใจฉันแนะนำให้ทำอย่างละเอียดในการตอบคำถามเช่น "วิธีการ" แทน "ทำไมไม่"
— YakovL
15

คำตอบนี้ขึ้นอยู่กับคำตอบhttps://stackoverflow.com/a/24933495/3890888แต่ใช้สคริปต์ JavaScript เวอร์ชันธรรมดาที่ใช้งานที่นั่น

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

/*
 * Replace all SVG images with inline SVG
 */
document.querySelectorAll('img.svg').forEach(function(img){
    var imgID = img.id;
    var imgClass = img.className;
    var imgURL = img.src;

    fetch(imgURL).then(function(response) {
        return response.text();
    }).then(function(text){

        var parser = new DOMParser();
        var xmlDoc = parser.parseFromString(text, "text/xml");

        // Get the SVG tag, ignore the rest
        var svg = xmlDoc.getElementsByTagName('svg')[0];

        // Add replaced image's ID to the new SVG
        if(typeof imgID !== 'undefined') {
            svg.setAttribute('id', imgID);
        }
        // Add replaced image's classes to the new SVG
        if(typeof imgClass !== 'undefined') {
            svg.setAttribute('class', imgClass+' replaced-svg');
        }

        // Remove any invalid XML tags as per http://validator.w3.org
        svg.removeAttribute('xmlns:a');

        // Check if the viewport is set, if the viewport is not set the SVG wont't scale.
        if(!svg.getAttribute('viewBox') && svg.getAttribute('height') && svg.getAttribute('width')) {
            svg.setAttribute('viewBox', '0 0 ' + svg.getAttribute('height') + ' ' + svg.getAttribute('width'))
        }

        // Replace image with new SVG
        img.parentNode.replaceChild(svg, img);

    });

});

จากนั้นตอนนี้ถ้าคุณทำ:

.logo-img path {
  fill: #000;
}

หรืออาจจะ:

.logo-img path {
  background-color: #000;
}

JSFiddle: http://jsfiddle.net/erxu0dzz/1/

— Seb3736
แหล่งที่มา
1
เยี่ยมมาก .. ได้ผล นอกจากนี้หากหน้าของเรามีหลาย svgs เราจะต้องนำการบล็อกมาไว้ใน IIFE
— Sandeep Sharma
1
ที่ดี! ทำงานได้ดีกับ ES6 หากคุณไม่สนใจ IE 9 คุณสามารถใช้: parser.parseFromString(text, "image/svg+xml");
— ChristoKiwi
ไม่ทำงานใน UIWebView บน iOS 9.3.5 ฉันคิดว่าอาจเป็นเพราะการใช้งานfetchที่เพิ่มเข้ามาใน Safari ใน 10.1 ( developer.mozilla.org/en-US/docs/Web/API/Fetch_API ) รุ่น jQuery ด้านบนใช้งานได้
— Maria-Ines Carrera
7

ใช้ตัวกรองเพื่อแปลงเป็นสีใด ๆ

ฉันเพิ่งพบโซลูชันนี้และหวังว่าจะมีใครบางคนอาจใช้งานได้ เนื่องจากโซลูชันใช้ตัวกรองจึงสามารถใช้กับรูปภาพทุกประเภท ไม่ใช่แค่ svg

หากคุณมีภาพสีเดียวที่คุณต้องการเปลี่ยนสีของคุณสามารถทำได้ด้วยความช่วยเหลือของตัวกรองบางอย่าง มันใช้งานได้กับภาพหลากสีเช่นกัน แต่คุณไม่สามารถกำหนดสีที่ต้องการได้ เฉพาะภาพรวมทั้งหมด

ตัวกรองมาจากสคริปต์ที่เสนอในวิธีเปลี่ยนสีดำเป็นสีใดก็ตามโดยใช้ตัวกรอง CSS เท่านั้น หากคุณต้องการเปลี่ยนสีขาวเป็นสีใด ๆ คุณสามารถปรับค่าการสลับกลับในแต่ละตัวกรองได้

.startAsBlack{
  display: inline-block;
  width: 50px;
  height: 50px;
  background: black;
}

.black-green{
  filter: invert(43%) sepia(96%) saturate(1237%) hue-rotate(88deg) brightness(128%) contrast(119%);
}

.black-red{
  filter: invert(37%) sepia(93%) saturate(7471%) hue-rotate(356deg) brightness(91%) contrast(135%);
}

.black-blue{
  filter: invert(12%) sepia(83%) saturate(5841%) hue-rotate(244deg) brightness(87%) contrast(153%);
}

.black-purple{
  filter: invert(18%) sepia(98%) saturate(2657%) hue-rotate(289deg) brightness(121%) contrast(140%);
}
Black to any color: <br/>
<div class="startAsBlack black-green"></div>
<div class="startAsBlack black-red"></div>
<div class="startAsBlack black-blue"></div>
<div class="startAsBlack black-purple"></div>
ขยายตัวอย่างข้อมูล

— JasperZelf
แหล่งที่มา
4

หากต้องการขยายคำตอบ @gringo วิธีจาวาสคริปต์ที่อธิบายไว้ในคำตอบอื่น ๆ นั้นใช้งานได้ แต่ผู้ใช้จำเป็นต้องดาวน์โหลดไฟล์รูปภาพที่ไม่จำเป็นและ IMO ซึ่งจะเป็นการขยายโค้ดของคุณ

ฉันคิดว่าวิธีที่ดีกว่าคือการโยกย้ายกราฟฟิกแบบเวกเตอร์ 1 สีทั้งหมดไปยังไฟล์ webfont ฉันใช้Fort Awesomeและใช้งานได้ดีในการรวมไอคอน / รูปภาพที่กำหนดเองของคุณในรูปแบบ SVG พร้อมกับไอคอนบุคคลที่สามที่คุณอาจใช้ (Font Awesome, ไอคอน Bootstrap ฯลฯ ) เป็นไฟล์ webfont เดียว ผู้ใช้จะต้องดาวน์โหลด คุณยังสามารถปรับแต่งมันได้ดังนั้นคุณจึงรวมเฉพาะไอคอนบุคคลที่สามที่คุณใช้งานอยู่ วิธีนี้จะลดจำนวนคำขอที่หน้าเว็บทำและคุณจะมีน้ำหนักหน้าโดยรวมโดยเฉพาะอย่างยิ่งหากคุณรวมไลบรารีไอคอนบุคคลที่สาม

หากคุณต้องการตัวเลือกที่มุ่งเน้นมากกว่านี้คุณสามารถGoogle "npm svg webfont"และใช้หนึ่งในโมดูลโหนดที่เหมาะสมที่สุดสำหรับสภาพแวดล้อมของคุณ

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

— bpulecio
แหล่งที่มา
คุณควรลองสไปรต์ SVG จากประสบการณ์ของฉันเว็บฟอนต์มีปัญหาแบบสุ่มระหว่างการเปิดเบราว์เซอร์ ลองสิ่งนี้: fontastic.me - แต่ใช้ SVG Sprite เวอร์ชั่น - และดูว่าคุณคิดอย่างไร :)
— sheriffderek
4

หากคุณเพียงแค่เปลี่ยนภาพระหว่างสีจริงและขาวดำคุณสามารถตั้งค่าตัวเลือกหนึ่งเป็น:

{กรอง: none;}

และอีกอย่างเป็น:

{filter:grayscale(100%);}
— wcb1
แหล่งที่มา
3

ที่เรียบง่าย ..

คุณสามารถใช้รหัสนี้:

<svg class="logo">
  <use xlink:href="../../static/icons/logo.svg#Capa_1"></use>
</svg>

ก่อนอื่นให้ระบุเส้นทางของ svg จากนั้นจึงเขียนเป็น ID ในกรณีนี้ "Capa_1" คุณสามารถรับ ID ของ svg ได้โดยเปิดในตัวแก้ไขใด ๆ

ใน css: 

.logo {
  fill: red;
}
— Hamza Jamal
แหล่งที่มา
kabrice คุณสามารถใช้รหัสนี้ codepen.io/hmzajmal/pen/ZEGvWYa
— Hamza Jamal
2

ปัญหาหลักในกรณีของคุณคือคุณกำลังนำเข้า svg จาก<img>แท็กซึ่งจะซ่อนโครงสร้าง SVG

คุณต้องใช้<svg>แท็กร่วมกับ<use>เพื่อให้ได้เอฟเฟกต์ที่ต้องการ เพื่อให้มันใช้งานได้คุณจะต้องให้idพา ธ ที่คุณต้องการใช้ในไฟล์ SVG <path id='myName'...>เพื่อที่จะสามารถดึงมันออกมาจาก<use xlink:href="#myName"/>แท็ก ลอง snipped ด้านล่าง

แสดงตัวอย่างโค้ด

โปรดทราบว่าคุณสามารถใส่ URL ใด ๆ ข้างหน้าส่วน#หากคุณต้องการโหลด SVG จากแหล่งภายนอก (และไม่ฝังลงใน HTML ของคุณ) นอกจากนี้โดยปกติแล้วคุณไม่ได้ระบุการเติมลงใน CSS ควรพิจารณาใช้fill:"currentColor"ภายใน SVG เอง จากนั้นจะใช้ค่าสี CSS ขององค์ประกอบที่สอดคล้องกัน

— Flavien Volken
แหล่งที่มา
2

เนื่องจาก SVG นั้นเป็นรหัสคุณจึงต้องการเพียงเนื้อหา ฉันใช้ PHP เพื่อรับเนื้อหา แต่คุณสามารถใช้สิ่งที่คุณต้องการ

<?php
$content    = file_get_contents($pathToSVG);
?>

จากนั้นฉันพิมพ์เนื้อหา "ตามที่เป็น" ไว้ในคอนเทนเนอร์ div

<div class="fill-class"><?php echo $content;?></div>

หากต้องการ finnaly ตั้งค่ากฎให้กับ SVG ของ childs บน CSS

.fill-class > svg { 
    fill: orange;
}

ฉันได้ผลลัพธ์นี้ด้วยไอคอนเนื้อหา SVG:

Mozilla Firefox 59.0.2 (64 บิต) Linux

ป้อนคำอธิบายรูปภาพที่นี่

Google Chrome66.0.3359.181 (Build oficial) (64 บิต) Linux

ป้อนคำอธิบายรูปภาพที่นี่

Opera 53.0.2907.37 Linux

ป้อนคำอธิบายรูปภาพที่นี่

— เบนจามิน
แหล่งที่มา
ฉันไม่สามารถลงคะแนนได้ แต่โปรดไม่เคยทำเช่นนี้มาก่อน
— sander
5
เหตุผล? ทางเลือก?
— Benjamin
เหตุผลของฉันสำหรับการไม่ทำเช่นนี้คือการป้องกันไม่ให้เบราว์เซอร์แคช SVG ทางเลือกคือการใช้หัวฉีด SVG ที่กล่าวถึงในคำตอบอื่น ๆ ที่นี่ เบราว์เซอร์ไฟล์ SVG จะยังคงถูกแคชไว้และ SVG ที่ถูกฉีดจะยังคงสไตล์ด้วย CSS แต่ฉันไม่ลงคะแนนคุณ
— -Nguyễn
ฉันเข้าใจ แต่อย่างไรก็ตามไม่มีการกล่าวถึงแคช คำตอบที่ดีที่สุดมีรหัสจาวาสคริปต์ที่สามารถโหลดใหม่ (หรือไม่) ทุกครั้งโดยการจัดการส่วนหัวหมดอายุหรือบังคับให้แฮชหลังจากลิงก์ชื่อไฟล์ขอบคุณที่ไม่ต้องลงคะแนน แต่ฉันยังเชื่อว่าคำตอบของฉันแก้ไขการเปลี่ยน SVG
— Benjamin
2

สิ่งนี้อาจเป็นประโยชน์สำหรับผู้ที่ใช้PHPร่วมกับ.svgรูปภาพที่พวกเขาต้องการจัดการกับ CSS

คุณไม่สามารถเขียนทับคุณสมบัติภายในแท็ก img ด้วย CSS แต่เมื่อซอร์สโค้ด svg ถูกฝังใน HTML คุณสามารถทำได้อย่างแน่นอน ฉันต้องการแก้ไขปัญหานี้ด้วยrequire_onceฟังก์ชั่นที่ฉันรวม.svg.phpไฟล์ไว้ มันเหมือนกับการนำเข้ารูปภาพ แต่คุณยังสามารถเขียนทับสไตล์ได้ด้วย CSS!

ก่อนอื่นให้รวมไฟล์ svg:

<?php require_once( '/assets/images/my-icon.svg.php' ); ?>

และมันรวมถึงไอคอนนี้เช่น: 

<svg xmlns="http://www.w3.org/2000/svg" width="20.666" height="59.084" viewBox="0 0 20.666 59.084"><g transform="translate(-639.749 -3139)"><path d="M648.536,3173.876c0-2.875-1.725-3.8-3.471-3.8-1.683,0-3.49.9-3.49,3.8,0,3,1.786,3.8,3.49,3.8C646.811,3177.676,648.536,3176.769,648.536,3173.876Zm-3.471,2.341c-.883,0-1.437-.513-1.437-2.341,0-1.971.615-2.381,1.437-2.381.862,0,1.438.349,1.438,2.381,0,1.907-.616,2.339-1.438,2.339Z" fill="#142312"/><path d="M653.471,3170.076a1.565,1.565,0,0,0-1.416.9l-6.558,13.888h1.2a1.565,1.565,0,0,0,1.416-.9l6.559-13.887Z" fill="#142312"/><path d="M655.107,3177.263c-1.684,0-3.471.9-3.471,3.8,0,3,1.766,3.8,3.471,3.8,1.745,0,3.49-.9,3.49-3.8C658.6,3178.186,656.851,3177.263,655.107,3177.263Zm0,6.139c-.884,0-1.438-.514-1.438-2.34,0-1.972.617-2.381,1.438-2.381.862,0,1.437.349,1.437,2.381,0,1.909-.616,2.34-1.437,2.34Z" fill="#142312"/><path d="M656.263,3159.023l-1.49-14.063a1.35,1.35,0,0,0,.329-.293,1.319,1.319,0,0,0,.268-1.123l-.753-3.49a1.328,1.328,0,0,0-1.306-1.054h-6.448a1.336,1.336,0,0,0-1.311,1.068l-.71,3.493a1.344,1.344,0,0,0,.276,1.112,1.532,1.532,0,0,0,.283.262l-1.489,14.087c-1.7,1.727-4.153,4.871-4.153,8.638v28.924a1.339,1.339,0,0,0,1.168,1.49,1.357,1.357,0,0,0,.17.01h17.981a1.366,1.366,0,0,0,1.337-1.366v-29.059C660.414,3163.893,657.963,3160.749,656.263,3159.023Zm-8.307-17.349h4.274l.176.815H647.79Zm9.785,43.634v10.1H642.434v-17.253a4.728,4.728,0,0,1-2.028-4.284,4.661,4.661,0,0,1,2.028-4.215v-2c0-3.162,2.581-5.986,3.687-7.059a1.356,1.356,0,0,0,.4-.819l1.542-14.614H652.1l1.545,14.618a1.362,1.362,0,0,0,.4.819c1.109,1.072,3.688,3.9,3.688,7.059v9.153a5.457,5.457,0,0,1,0,8.5Z" fill="#142312"/></g></svg>

ตอนนี้เราสามารถเปลี่ยนสีเติมได้อย่างง่ายดายด้วย CSS:

svg path {
  fill: blue;
}

ฉันพยายามแก้ไขปัญหานี้เป็นครั้งแรกด้วยfile_get_contents()แต่วิธีแก้ไขปัญหาข้างต้นนั้นเร็วกว่ามาก

— Floris
แหล่งที่มา
0

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

public static function print_svg($file){
    $iconfile = new \DOMDocument();
    $iconfile->load($file);
    $tag = $iconfile->saveHTML($iconfile->getElementsByTagName('svg')[0]);
    return $tag;
}

ตอนนี้เมื่อคุณเรนเดอร์ไฟล์คุณจะได้รับ inline svg ที่สมบูรณ์

— nechemya ungar
แหล่งที่มา
0

เปิดไอคอน svg ในโปรแกรมแก้ไขรหัสของคุณและเพิ่มคลาสหลังแท็กพา ธ :

<path class'colorToChange' ...

คุณสามารถเพิ่มคลาสลงใน svg และเปลี่ยนสีดังนี้:

codepen

— Hamza Jamal
แหล่งที่มา
-2

หากคุณมีสิทธิ์เข้าถึง JQuery การขยายไปสู่คำตอบของ Praveen สามารถเปลี่ยนสีขององค์ประกอบที่ซ้อนกันต่าง ๆ ภายใน SVG โดยทางโปรแกรมโดย:

$('svg').find('path, text').css('fill', '#ffffff');

ในการค้นหาคุณสามารถพูดถึงองค์ประกอบต่าง ๆ ที่จำเป็นต้องเปลี่ยนเป็นสี

— manyu
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.