使用JQuery更改svg内的填充颜色[重复]

Posted 2023-03-06

【中文标题】使用JQuery更改svg内的填充颜色[重复]

【英文标题】：Change fill color inside svg using JQuery [duplicate]

【发布时间】：2017-03-13 20:07:54

【问题描述】：

我有一个嵌入在“img src”标签中的 SVG 图像。 svg 包含带有颜色的不同路径，每个路径由 id 分隔。我想使用 jquery 更改每个 id 内的填充颜色

以下是我使用的代码。但是颜色没有变化。通过大量搜索，我发现如果将svg直接添加到html中，它就会起作用。一个工作示例：http://jsfiddle.net/P6t2B/

但是如果是通过'img src'来添加svg怎么实现呢？？

html内部：

<img src="images/hands.svg" />

JQuery 代码更改填充颜色 id 'l1':

$('#l1').css(fill:"#000000");

SVG 示例：

<path id="l1" fill="#ffffff" d="M85.6,227.3L85.6,227.3c14.2-5.7,21.1-22,15.3-36.2l-35.4-87.5c-2.5-6.1-9.5-9.1-15.6-6.6
    l-29.3,11.9c-6.1,2.5-9.1,9.5-6.6,15.6L49.4,212C55.1,226.1,71.4,233,85.6,227.3z"/>
<path id="l2" fill="#ffffff" d="M133.8,206.6L133.8,206.6c15.2-1.5,26.4-15.2,24.9-30.4L142.7,55.9
    c-0.6-6.6-6.5-11.4-13.1-10.8l-31.4,3.1c-6.6,0.6-11.4,6.5-10.8,13.1l16.1,120.3C104.9,196.9,118.6,208.1,133.8,206.6z"/>
<path id="l3" fill="#ffffff" d="M181.8,219.6L181.8,219.6c15,3,29.7-6.8,32.7-21.8l22.8-151.7c1.3-6.5-2.9-12.8-9.4-14.1
    l-31-6.2c-6.5-1.3-12.8,2.9-14.1,9.4L160,186.9C157,201.9,166.9,216.6,181.8,219.6z"/>
<path id="l4" fill="#ffffff" d="M227.8,247.1L227.8,247.1c13.9,6.5,30.5,0.4,37-13.4l58.1-142c2.8-6,0.2-13.2-5.8-16
    l-28.6-13.4c-6-2.8-13.2-0.2-16,5.8l-59.4,137.7C206.6,219.7,208.3,238,227.8,247.1z"/>
<path id="l5" fill="#ffffff" d="M257.1,245.1l51.8-41l37,0.5l24.5,15.4L337.7,256l-90.1,90.2l-31.6,15.9
    C216.1,362.1,184.1,325.9,257.1,245.1z"/>

【问题讨论】：

这可能会有所帮助 - ***.com/a/11978996/5984537

Gijo，您可以尝试将fill 属性值更改为变量currentColor，并使用color 属性切换颜色吗？这是fiddle，但如果没有托管您的图像，则无法进行测试。

如果这不起作用，您可能需要使用另一种嵌入方法，例如<object>，当您想与 svg 进行交互时，不建议将 <img> 标签用于 svg，因为 @ 987654332@ 元素只会渲染为栅格。

@Ricky_Ruiz 已经尝试过对象方法。不工作

【参考方案1】：

这可能会奏效。

$('img.svg').each(function()
    var $img = $(this);
    var imgClass = $img.attr('class');
    var imgURL = $img.attr('src');

    $.get(imgURL, function(data) 
        var $svg = $(data).find('svg');
        if(typeof imgClass !== 'undefined') 
            $svg = $svg.attr('class', imgClass+' style-color-black');
        
        $svg = $svg.removeAttr('xmlns:a');
        $img.replaceWith($svg);
    , 'xml');

);

来源：codedump