img src SVG thay đổi kiểu với CSS

374

html

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

css

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

Các Svg ở trên tải và nguyên bản fill: #fffnhưng khi tôi sử dụng ở trên cssđể thử đổi nó thành màu đen thì nó không thay đổi, đây là lần đầu tiên tôi chơi với SVG và tôi không chắc tại sao nó không hoạt động.

css  image  svg 
— sân chơi
nguồn
25
Bạn không thể ảnh hưởng đến hình ảnh SVG như thế ... chỉ các yếu tố SVG nội tuyến
— Paulie_D 24/07/14
1
— Icarus
Kiểm tra câu trả lời của tôi ở đây để sử dụng nội dung của SVG và CSS. stackoverflow.com/questions/11978995/ trộm
— Benjamin
3
— polRk

Câu trả lời:

154

Nếu mục tiêu của bạn chỉ là thay đổi màu sắc của logo và bạn không nhất thiết phải sử dụng CSS, thì đừng sử dụng javascript hoặc jquery như được đề xuất bởi một số câu trả lời trước đó.

Để trả lời chính xác câu hỏi ban đầu, chỉ cần:

  1. Mở của bạn logo.svgtrong một trình soạn thảo văn bản.

  2. tìm kiếm fill: #fffvà thay thế nó bằngfill: #000

Ví dụ: bạn logo.svgcó thể trông như thế này khi được mở trong trình soạn thảo văn bản:

<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>

... chỉ cần thay đổi điền và lưu.

— Rowe Morehouse
nguồn
6
... Và nếu không có "điền", bạn có thể thêm nó vào pathhoặc circlecác mục như <path fill="#777777" d="m129.774,74.409c-5.523,....
— SaeX
1
Điều gì nếu logo của tôi có một màu trên tiêu đề và một màu khác trên chân trang?
— rubens.lopes
. @ ruben.lopes hai tệp khác nhau hoặc hai dòng khác nhau sẽ đơn giản nhất
— Rowe Morehouse
11
bạn cũng có thể sử dụng fill="currentColor"sau đó sử dụng colorphần tử gốc css-tricks.com/cascading-svg-fill-color
— Serge
10
Điều này rõ ràng là có thể và không thực sự là một câu trả lời hữu ích.
— Timmmm
102

Bạn có thể đặt SVG của bạn làm mặt nạ. Bằng cách đó, việc đặt màu nền sẽ đóng vai trò là màu tô của bạn.

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

Vui lòng kiểm tra xem trình duyệt của bạn có hỗ trợ tính năng này không: https://caniuse.com/#search=mask

— André Kuhlmann
nguồn
3
Vì vậy, đối với bất cứ điều gì nhưng trang web nội bộ không thể sử dụng.
— Henrik Vendelbo
9
89% hỗ trợ toàn cầu kể từ ngày 29 tháng 5 năm 2016.
— Gajus
1
Đây là một giải pháp tuyệt vời cho các tình huống như mô tả ở đây , trong đó sử dụng bất cứ thứ gì khác ngoài uris dữ liệu trong css là một chút đau đớn. Cảm ơn!
— Gark Garcia
3
nó không hoạt động. nó nói masklà một invalid property value. tôi đang thử nghiệm điều này trong chrome.
— Eren555
1
@MadMac Tôi đang chạy cùng một phiên bản Chrome, nhưng tôi không thể sao chép hành vi đó. Đây có phải là JSFiddle bạn đã thử hay mã của bạn không?
— André Kuhlmann
78

Hãy thử CSS thuần túy:

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

thêm thông tin trong bài viết này https://blog.union.io/code/2017/08/10/img-svg-fill/

— Feri
nguồn
Đã nhận được một màu khác trên Edge so với các trình duyệt khác với một trong những nỗ lực của tôi gần đây.
— Julix
4
Điều này hoạt động trong hầu hết các trình duyệt nhưng tôi đã gặp một số vấn đề với trình duyệt IOS-Safari.
— Simon Ludwig
30

2018: Nếu bạn muốn có một màu động, không muốn sử dụng javascript và không muốn một SVG nội tuyến, hãy sử dụng biến CSS. Hoạt động trong Chrome, Firefox và Safari. chỉnh sửa: và Edge

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

Trong SVG của bạn, thay thế bất kỳ trường hợp nào style="fill: #000"bằng style="fill: var(--color_fill)".

— Bắc Mỹ
nguồn
1
Trình duyệt hỗ trợ gì cho việc này
— Kevin Goedecke
@KevinGoedecke Chrome, Firefox, Safari và Edge
— southamerican
4
Có vẻ không được chấp nhận trong SVG 2
— vsync
5
@northamerican - liên kết đến các câu trả lời stackoverflow khác là "bằng chứng" không liên quan. bất cứ ai cũng có thể viết bất cứ điều gì trên nền tảng này. 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
Có vẻ như đó xlink:hreflà phản đối ủng hộ href. Vì vậy, điều này có thể vẫn hoạt động.
— Benjamin Intal
20

Trước tiên, bạn sẽ phải tiêm SVG vào HTML DOM.

Có một thư viện mã nguồn mở gọi là SVGInject thực hiện điều này cho bạn. Nó sử dụng onloadthuộc tính để kích hoạt tiêm.

Dưới đây là một ví dụ tối thiểu sử dụng SVGInject:

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

Sau khi hình ảnh được tải, onload="SVGInject(this)sẽ kích hoạt tiêm và <img>phần tử sẽ được thay thế bằng nội dung của tệp SVG được cung cấp trong srcthuộc tính.

Nó giải quyết một số vấn đề với tiêm SVG:

  1. SVG có thể được ẩn cho đến khi tiêm xong. Điều này rất quan trọng nếu một kiểu đã được áp dụng trong thời gian tải, điều này sẽ gây ra một "flash nội dung không được lưu trữ" ngắn.

  2. Các <img>yếu tố tự tiêm. Nếu bạn thêm SVG một cách linh hoạt, bạn không phải lo lắng về việc gọi lại chức năng tiêm.

  3. Một chuỗi ngẫu nhiên được thêm vào mỗi ID trong SVG để tránh có cùng một ID nhiều lần trong tài liệu nếu một SVG được tiêm nhiều lần.

SVGInject là Javascript đơn giản và hoạt động với tất cả các trình duyệt hỗ trợ SVG.

Tuyên bố miễn trừ trách nhiệm: Tôi là đồng tác giả của SVGInject

— Chiến tranh
nguồn
3
Đây là câu trả lời đơn giản nhất. Tôi đã thử nghiệm nó trong Chrome, Firefox và Edge và nó hoạt động hoàn hảo.
— Sébastien Lorion
15

Câu trả lời từ @Praveen là vững chắc.

Tôi không thể nhận được nó để đáp ứng trong công việc của mình, vì vậy tôi đã thực hiện một chức năng di chuột cho nó.

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
nguồn
1
Điều này sẽ không hoạt động nếu bắt đầu với SVG?
— Daniel Thompson
Có, nhưng nếu bạn đang làm việc với nhiều tệp SVG hoặc cập nhật chúng thường xuyên thì sẽ rất khó quản lý.
— Matt Wujek
15

Tại sao không tạo một webfont với hình ảnh hoặc hình ảnh của bạn, nhập webfont vào css và sau đó chỉ cần thay đổi màu của glyph bằng thuộc tính màu css? Không cần javascript

— gringo
nguồn
5
Nếu svg của bạn có một số yếu tố có màu sắc khác nhau, giải pháp này trở nên rất khó xử (một số yếu tố xen kẽ).
— kakaja
1
@kakaja Đây là giải pháp chỉ dành cho hình ảnh vector có 1 màu trong đó. xem câu trả lời của bpulecio để biết thêm chi tiết
— gringo
1
Bởi vì biểu tượng không phải là văn bản. Phông chữ dành cho văn bản. Svss là cho các biểu tượng.
— Lazar Ljubenović
2
@ LazarLjubenović - Về mặt kỹ thuật, văn bản được tạo từ các ký tự là biểu tượng và biểu tượng cũng là biểu tượng, vì vậy đây là lý do tại sao nhiều người không gặp vấn đề khi sử dụng phông chữ biểu tượng. nó giống như tạo ra ngôn ngữ văn bản "khác". Tiếng Quan thoại sử dụng "biểu tượng" và không phải chữ cái, cũng không có gì lạ khi nhân loại sử dụng biểu tượng làm "văn bản"
— vsync
1
trong khi điều này nghe có vẻ là một giải pháp thú vị, tôi thực sự khuyên bạn nên xây dựng câu trả lời thành một cái gì đó giống như "làm thế nào" thay vì "tại sao không"
— YakovL 20/03/19
15

Câu trả lời này dựa trên câu trả lời https://stackoverflow.com/a/24933495/3890888 nhưng với phiên bản JavaScript đơn giản của tập lệnh được sử dụng ở đó.

Bạn cần làm cho SVG trở thành một SVG nội tuyến . Bạn có thể sử dụng tập lệnh này bằng cách thêm một lớp svgvào hình ảnh:

/*
 * 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);

    });

});

Và sau đó, bây giờ nếu bạn làm:

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

Hoặc có thể:

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

Mã nguồn: http://jsfiddle.net/erxu0dzz/1/

— Seb3736
nguồn
1
Những công việc tuyệt vời. Ngoài ra, nếu trang của chúng tôi có nhiều svss thì chúng tôi sẽ cần đưa khối tìm nạp vào IIFE.
— Sandeep Sharma
1
Tuyệt quá! Hoạt động tốt với ES6. Nếu bạn không quan tâm đến IE 9, bạn thậm chí có thể sử dụng: parser.parseFromString(text, "image/svg+xml");
— ChristoKiwi
Không hoạt động trong UIWebView trên iOS 9.3.5. Tôi nghĩ rằng đó có thể là do việc sử dụng fetchđã được thêm vào Safari trong 10.1 ( developer.mozilla.org/en-US/docs/Web/API/Fetch_API ). Phiên bản jQuery ở trên không hoạt động.
— Maria-Ines Carrera
7

Sử dụng các bộ lọc để chuyển đổi sang bất kỳ màu nào.

Gần đây tôi đã tìm thấy giải pháp này và hy vọng ai đó có thể sử dụng nó. Vì giải pháp sử dụng các bộ lọc, nó có thể được sử dụng với bất kỳ loại hình ảnh nào. Không chỉ là Svg.

Nếu bạn có một hình ảnh một màu mà bạn chỉ muốn thay đổi màu sắc, bạn có thể làm điều này với sự trợ giúp của một số bộ lọc. Tất nhiên, nó cũng hoạt động trên các hình ảnh nhiều màu, nhưng bạn không thể nhắm mục tiêu một màu cụ thể. Chỉ toàn bộ hình ảnh.

Các bộ lọc xuất phát từ tập lệnh được đề xuất trong Cách chuyển đổi màu đen thành bất kỳ màu nào được cung cấp chỉ bằng các bộ lọc CSS Nếu bạn muốn thay đổi màu trắng thành bất kỳ màu nào, bạn có thể điều chỉnh giá trị đảo ngược trong mỗi bộ lọc.

.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>
Mở rộng đoạn trích

— JasperZelf
nguồn
4

Để mở rộng câu trả lời @gringo, phương pháp Javascript được mô tả trong các câu trả lời khác hoạt động, nhưng yêu cầu người dùng tải xuống các tệp hình ảnh không cần thiết và IMO, nó làm mờ mã của bạn.

Tôi nghĩ rằng một cách tiếp cận tốt hơn sẽ là di chuyển tất cả đồ họa vector 1 màu sang tệp webfont. Trước đây tôi đã sử dụng Fort Awesome và hoạt động rất tốt khi kết hợp các biểu tượng / hình ảnh tùy chỉnh của bạn ở định dạng SVG, cùng với bất kỳ biểu tượng bên thứ 3 nào bạn có thể đang sử dụng (Font Awesome, biểu tượng Bootstrap, v.v.) vào một tệp webfont duy nhất người dùng phải tải về. Bạn cũng có thể tùy chỉnh nó, vì vậy bạn chỉ bao gồm các biểu tượng của bên thứ 3 bạn đang sử dụng. Điều này giúp giảm số lượng yêu cầu mà trang phải thực hiện và tổng trọng lượng trang của bạn, đặc biệt nếu bạn đã bao gồm bất kỳ thư viện biểu tượng của bên thứ 3 nào.

Nếu bạn thích một tùy chọn hướng phát triển hơn, bạn có thể Google "npm svg webfont" và sử dụng một trong các mô-đun nút phù hợp nhất với môi trường của bạn.

Khi bạn đã thực hiện một trong hai tùy chọn đó, sau đó bạn có thể dễ dàng thay đổi màu sắc thông qua CSS và rất có thể, bạn đã tăng tốc trang web của mình trong quá trình này.

— bpulecio
nguồn
Bạn nên thử SVG spites. Theo kinh nghiệm của tôi, phông chữ web có vấn đề ngẫu nhiên giữa các bản phát hành trình duyệt. Hãy thử điều này: fontastic.me - nhưng sử dụng các phiên bản sprite SVG - và xem những gì bạn nghĩ. :)
— sheriffderek
4

Nếu bạn chỉ chuyển đổi hình ảnh giữa màu thực và đen trắng, bạn có thể đặt một bộ chọn là:

{bộ lọc: none;}

và một cái khác như:

{filter:grayscale(100%);}
— wcb1
nguồn
3

Đơn giản..

Bạn có thể sử dụng mã này:

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

Trước tiên, chỉ định đường dẫn của svg và sau đó viết ID của nó, trong trường hợp này là "Capa_1". Bạn có thể lấy ID của svg bằng cách mở nó trong bất kỳ trình soạn thảo nào.

Trong css: 

.logo {
  fill: red;
}
— Hamza Jamal
nguồn
kabrice, Bạn có thể sử dụng mã này codepen.io/hmzajmal/pen/ZEGvWYa
— Hamza Jamal
2

Vấn đề chính trong trường hợp của bạn là bạn đang nhập svg từ một <img>thẻ sẽ ẩn cấu trúc SVG.

Bạn cần sử dụng <svg>thẻ kết hợp với <use>để có được hiệu quả mong muốn. Để làm cho nó hoạt động, bạn cần cung cấp một idđường dẫn bạn muốn sử dụng trong tệp SVG <path id='myName'...>để sau đó có thể truy xuất chúng từ <use xlink:href="#myName"/>thẻ. Hãy thử bắn tỉa dưới đây.

Hiển thị đoạn mã

Lưu ý rằng bạn có thể đặt bất kỳ URL nào trước đoạn #nếu bạn muốn tải SVG từ nguồn bên ngoài (và không nhúng URL vào HTML của bạn). Ngoài ra, thông thường bạn không chỉ định điền vào CSS. Tốt hơn là xem xét sử dụng fill:"currentColor"trong chính SVG. Giá trị màu CSS của phần tử tương ứng sau đó sẽ được sử dụng tại chỗ.

— Flavien Volken
nguồn
2

Vì SVG về cơ bản là mã, bạn chỉ cần nội dung. Tôi đã sử dụng PHP để có được nội dung, nhưng bạn có thể sử dụng bất cứ thứ gì bạn muốn.

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

Sau đó, tôi đã in nội dung "như là" bên trong một thùng chứa div

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

Để hoàn thiện quy tắc đặt các con SVG của CSS trên CSS

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

Tôi đã nhận được kết quả này với một biểu tượng vật chất SVG:

Mozilla Firefox 59.0.2 (64-bit) Linux

nhập mô tả hình ảnh ở đây

Google Chrome66.0.3359.181 (Xây dựng chính thức) (64 bit) Linux

nhập mô tả hình ảnh ở đây

Opera 53.0.2907.37 Linux

nhập mô tả hình ảnh ở đây

— Benjamin
nguồn
Tôi không thể downvote nhưng xin đừng bao giờ làm điều này.
— sander
5
Lý do? Lựa chọn thay thế?
— Benjamin
Lý do của tôi không làm điều này là vì điều này ngăn trình duyệt lưu SVG. Thay thế là sử dụng một bộ tiêm SVG được đề cập trong một vài câu trả lời khác ở đây. Tệp SVG vẫn sẽ được trình duyệt lưu vào bộ nhớ cache và SVG được tiêm vẫn có thể được tạo kiểu bằng CSS. Nhưng tôi không đánh giá thấp bạn.
— Sơn Trần-Nguyễn
Tôi hiểu, nhưng dù sao, bộ nhớ cache không được đề cập. Câu trả lời hay nhất có mã JavaScript có thể tải lại (hoặc không) mọi lúc bằng thao tác hết hạn tiêu đề hoặc buộc băm sau liên kết tên tệp. Cảm ơn vì không downvote, nhưng tôi vẫn tin rằng câu trả lời của tôi giải quyết việc thay đổi SVG bằng thuộc tính điền CSS.
— Benjamin
2

Điều này có thể hữu ích cho những người sử dụng PHPkết hợp với.svg hình ảnh mà họ muốn thao tác bằng CSS.

Bạn không thể ghi đè các thuộc tính bên trong thẻ img bằng CSS. Nhưng khi mã nguồn svg được nhúng trong HTML, bạn chắc chắn có thể. Tôi muốn giải quyết vấn đề này bằng một require_oncechức năng trong đó tôi bao gồm một.svg.php tệp. Giống như nhập hình ảnh nhưng bạn vẫn có thể ghi đè lên các kiểu bằng CSS!

Đầu tiên bao gồm các tập tin svg:

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

Và nó bao gồm biểu tượng này chẳng hạn: 

<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>

Bây giờ chúng ta có thể dễ dàng thay đổi màu tô như thế này bằng CSS:

svg path {
  fill: blue;
}

Lần đầu tiên tôi đã cố gắng giải quyết vấn đề này file_get_contents()nhưng giải pháp trên nhanh hơn nhiều.

— Floris
nguồn
0

Biết đây là một câu hỏi cũ nhưng gần đây chúng tôi đã gặp phải vấn đề tương tự và chúng tôi đã giải quyết nó từ phía máy chủ. Đây là một câu trả lời cụ thể của php nhưng tôi khẳng định rằng các env khác có điểm tương tự. thay vì sử dụng thẻ img, bạn kết xuất svg dưới dạng svg từ get-go.

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

Bây giờ khi bạn kết xuất tập tin, bạn sẽ nhận được đầy đủ nội tuyến

— nechemya ungar
nguồn
0

mở biểu tượng svg trong trình soạn thảo mã của bạn và thêm một lớp sau thẻ đường dẫn:

<path class'colorToChange' ...

Bạn có thể thêm lớp vào svg và thay đổi màu như thế này:

codepen

— Hamza Jamal
nguồn
-2

Nếu bạn có quyền truy cập vào JQuery, sau đó mở rộng câu trả lời của Praveen, người ta có thể thay đổi màu sắc của các phần tử lồng nhau khác nhau trong SVG bằng cách:

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

Trong tìm kiếm, bạn có thể đề cập đến các yếu tố khác nhau cần được thay đổi về màu sắc.

— nhiều
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.