在输入类型图像中更改 svg 中的填充颜色

Posted 2023-03-28

【中文标题】在输入类型图像中更改 svg 中的填充颜色

【英文标题】：Changing fill color in svg in an input type image

【发布时间】：2018-08-29 09:41:56

【问题描述】：

我正在关注这个例子： img src SVG changing the fill color

要像这样更改输入标签：

<input name="ctl00$ctl00$cphM$cph$ImageButtonAnadirLote" class="btnAfirmativo" id="ctl00_ctl00_cphM_cph_ImageButtonAnadirLote" style="border-width: 0px; cursor: pointer;" onclick='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ctl00$cphM$cph$ImageButtonAnadirLote", "", true, "", "", false, false))' type="image" src="https://upload.wikimedia.org/wikipedia/commons/f/f8/Windows_logo_-_2012_%28red%29.svg">

CSS 在哪里：

btnAfirmativowidth: 350px; height: 350px;
btnAfirmativo path fill: #000 !important;

更改输入类型图像所引用的 svg 的颜色。我尝试在这里修改代码：http://jsfiddle.net/kurnosem/fucdt3fp/2/

还有一个问题：Styling SVG Fill Color of an input element 但是这个并没有提供我想要的解决方案。

如果图像是 svg 文件，是否可以更改输入标签类型图像的颜色？ （改编jsfiddle代码）

【问题讨论】：

据我所知，您无法设置远程资源的样式 - 只能设置内联 SVG 的样式。但是，当且仅当它只是您的图像，没有任何背景或其他视觉样式时，您可以通过在输入中使用 filter: brightness(0); 来获得类似的结果。

【参考方案1】：

由于您已经打开了 SVG 并对其内容进行了操作，因此您也可以使用其填充颜色进行操作。

var $path = jQuery(data).find('path');
$path.attr('style', $path.attr('style').replace("#e81123","#000"));

Updated fiddle

堆栈sn-p

$(function()
		//jQuery('img.btnAfirmativo').each(function()
    jQuery('input.btnAfirmativo').each(function()
        var $img = jQuery(this);
        var imgID = $img.attr('id');
        var imgClass = $img.attr('class');
        var imgURL = $img.attr('src');
        
				jQuery.get(imgURL, function(data) 
        
            var $path = jQuery(data).find('path');
            $path.attr('style', $path.attr('style').replace("#e81123","#000"));

            // Get the SVG tag, ignore the rest
            var $svg = jQuery(data).find('svg');
            
            // Add replaced image's ID to the new SVG
            if(typeof imgID !== 'undefined') 
                $svg = $svg.attr('id', imgID);
            
            // Add replaced image's classes to the new SVG
            if(typeof imgClass !== 'undefined') 
                $svg = $svg.attr('class', imgClass+' replaced-svg');
            
    
            // Remove any invalid XML tags as per http://validator.w3.org
            $svg = $svg.removeAttr('xmlns:a');
            
            // Check if the viewport is set, else we gonna set it if we can.
            if(!$svg.attr('viewBox') && $svg.attr('height') && $svg.attr('width')) 
                $svg.attr('viewBox', '0 0 ' + $svg.attr('height') + ' ' + $svg.attr('width'))
            
    
            // Replace image with new SVG
            $img.replaceWith($svg);
    
        , 'xml');
    
    );
);

btnAfirmativowidth: 350px; height: 350px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img class="btnAfirmativo" src="https://upload.wikimedia.org/wikipedia/commons/f/f8/Windows_logo_-_2012_%28red%29.svg"   >
<input name="ctl00$ctl00$cphM$cph$ImageButtonAnadirLote" class="btnAfirmativo" id="ctl00_ctl00_cphM_cph_ImageButtonAnadirLote" style="border-width: 0px; cursor: pointer;" onclick='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ctl00$cphM$cph$ImageButtonAnadirLote", "", true, "", "", false, false))' type="image" src="https://upload.wikimedia.org/wikipedia/commons/f/f8/Windows_logo_-_2012_%28red%29.svg">

---

使用 CSS，将其更新为这个

.btnAfirmativowidth: 350px; height: 350px;
.btnAfirmativo + svg path fill: #0f0 !important;

堆栈sn-p

$(function()
		//jQuery('img.btnAfirmativo').each(function()
    jQuery('input.btnAfirmativo').each(function()
        var $img = jQuery(this);
        var imgID = $img.attr('id');
        var imgClass = $img.attr('class');
        var imgURL = $img.attr('src');
        
				jQuery.get(imgURL, function(data)         

            // Get the SVG tag, ignore the rest
            var $svg = jQuery(data).find('svg');
            
            // Add replaced image's ID to the new SVG
            if(typeof imgID !== 'undefined') 
                $svg = $svg.attr('id', imgID);
            
            // Add replaced image's classes to the new SVG
            if(typeof imgClass !== 'undefined') 
                $svg = $svg.attr('class', imgClass+' replaced-svg');
            
    
            // Remove any invalid XML tags as per http://validator.w3.org
            $svg = $svg.removeAttr('xmlns:a');
            
            // Check if the viewport is set, else we gonna set it if we can.
            if(!$svg.attr('viewBox') && $svg.attr('height') && $svg.attr('width')) 
                $svg.attr('viewBox', '0 0 ' + $svg.attr('height') + ' ' + $svg.attr('width'))
            
    
            // Replace image with new SVG
            $img.replaceWith($svg);
    
        , 'xml');
    
    );
);

.btnAfirmativowidth: 350px; height: 350px;
.btnAfirmativo + svg path fill: #0f0 !important;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img class="btnAfirmativo" src="https://upload.wikimedia.org/wikipedia/commons/f/f8/Windows_logo_-_2012_%28red%29.svg"   >

<input name="ctl00$ctl00$cphM$cph$ImageButtonAnadirLote" class="btnAfirmativo" id="ctl00_ctl00_cphM_cph_ImageButtonAnadirLote" style="border-width: 0px; cursor: pointer;" onclick='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ctl00$cphM$cph$ImageButtonAnadirLote", "", true, "", "", false, false))' type="image" src="https://upload.wikimedia.org/wikipedia/commons/f/f8/Windows_logo_-_2012_%28red%29.svg">

【讨论】：

谢谢！这真的很有帮助！但是......还有一个问题，为什么它不适用于此图像：svgur.com/i/5xL.svg 我试图在这里修改它：jsfiddle.net/kurnosem/fucdt3fp/28

@rasputino 未经测试，我认为是因为他们的encoding不同，其中第一个有encoding="UTF-8"，第二个有encoding="iso-8859-1"。如果您检查它们最初的 <?xml ... ?> 标签，您会发现它们不同。

问题是svg格式不能改。我需要使用 iso-8859-1 编码的 svg 文件。有什么办法让它工作吗？再次感谢

@rasputino 如果您比较 2 个 svg 文件的 <xml> 和 <svg> 元素，您会发现它们的属性不同。在encoding 旁边，尝试使用 SVG 中无法使用的 SVG。

@rasputino 我现在注意到的另一件事是，使用非工作 SVG，控制台报告 “请求的资源上不存在‘Access-Control-Allow-Origin’标头” 。您是否尝试将文件复制到您自己的服务器/PC？