如何更改svg绘图的颜色？

I have a chemical compound loaded as svg:

我有一个化学化合物作为svg加载:

$('#svg-container').load(
'https://www.ebi.ac.uk/chembl/api/data/image/CHEMBL57.svg', null, null
});

It has original colors, which I need to change to orange (all of it so letters, bonds and atoms).

它有原始的颜色,我需要改变成橙色(所有这些都是字母,键和原子)。

I've tried this:

我试过这个:

http://jsfiddle.net/L2rd1e1g/4/

But it doesn't work. I believe this is something very easy, any help?

但它不起作用。我相信这很容易,有什么帮助吗?

3 个解决方案

#1

As jbutler483 writes the svg uses inline styles, a style attribut on the elements, what are most powerful in css cascades and can only be overwritten with !important via css. However this is as heavy as a js solution.

正如jbutler483所写,svg使用内联样式,一种风格归因于元素,css级联中最强大的东西,只能通过css覆盖!important。然而,这与js解决方案一样重。

Here is a fiddle with some (commented) js magic to change the color of the whole thing, however this also makes a border aropund the image. I am not sure why I cannot circumvent this behaviour.

这里有一些(注释)js魔法的小提琴改变了整个事物的颜色,但是这也使得边界的aropund成像。我不知道为什么我不能绕过这种行为。

Bonus in this fiddle is, that I included the source HTML of your svg, so you can take a look at it for yourself. (hint: [strg]+[shift]+i brings up the source inspector in Firefox, very useful to examine sources)

这个小提琴的奖励是,我包含了你的svg的源HTML,所以你可以自己看一下。 (提示:[strg] + [shift] +我在Firefox中调出源检查器,对检查源非常有用)

http://jsfiddle.net/usg12dg7/3/

$('#svg-container').load('https://www.ebi.ac.uk/chembl/api/data/image/CHEMBL57.svg', null,
    function(){
       var can = $('svg');
       console.log(can.children());
       can.find('g').css('fill','red');
       can.find('path').css('stroke','red');
});

#2

Since your svg is using inline styling, you may have to use the !important tag. Here's a quick example of coloring all of the svg with a tomato color:

由于您的svg使用内联样式,您可能必须使用!important标记。这是一个用番茄颜色着色所有svg的快速示例:

$('#svg-container').load('https://www.ebi.ac.uk/chembl/api/data/image/CHEMBL57.svg', null);

svg path {
  stroke: tomato !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="svg-container"></div>

---

Explanation

What I did here in order to complete this was to examine the svg file you were loading. This meant I needed to view the source of the svg, and locate what was giving the svg a color.

我在这里做的是为了完成这个是检查你正在加载的svg文件。这意味着我需要查看svg的来源,并找到给svg一个颜色的内容。

I noticed that the svg was using inline styling, of which needed to be overwritten in your css.

我注意到svg使用内联样式,需要在你的CSS中覆盖。

Due to the svg containing the inline styling, it meant that you need to be extra specific to overwrite this. (Hence my current implementation). However, i will further look into the svg and see if I can remove this 'nasty' property.

由于svg包含内联样式,这意味着您需要特别具体来覆盖它。 (因此我目前的实施)。但是,我将进一步调查svg,看看我是否可以删除这个“讨厌”的属性。

#3

ok here is some stuff you would want to know..

好的,这里有一些你想知道的东西..

svg is just xml..

svg只是xml ..

you can parse it, and play with it, just like any other xml.

你可以解析它,并使用它,就像任何其他xml一样。

svg colors in diagrams would often be defined through styling classes, that could be modified by updating the css, or style header.

图中的svg颜色通常通过样式类定义,可以通过更新css或样式标题来修改。

your example is not created like that, but instead each graphic element is given a style property.

您的示例不是这样创建的,而是为每个图形元素赋予样式属性。

to select the svg node properly, do this

要正确选择svg节点,请执行此操作

var svg = $('#svg-container>svg')

--

next in javascript jquery the .children() method only travels down one level, you want to go further than that..

接下来在javascript jquery中,.children()方法仅向下移动一级,你想要比那更进一步..

svg.find('*').each(function() {
    //this refers to the node..
}

and then update the style, where appropriate

然后在适当的时候更新样式

in example: http://jsfiddle.net/L2rd1e1g/9/

例如:http://jsfiddle.net/L2rd1e1g/9/

$('#svg-container').load('https://www.ebi.ac.uk/chembl/api/data/image/CHEMBL57.svg', null, function(svg){
    var svg = $('#svg-container>svg')
    svg.find('*').each(function() {
         if(this.style.fill.indexOf("rgb("))
             this.style.fill = "rgb(0,255,0)" 
    });
});

changes the color of all nodes that already had an rgb value assigned to the fill..

更改已经分配给填充的rgb值的所有节点的颜色。

here is a fully functional fiddle

这是一个功能齐全的小提琴

http://jsfiddle.net/L2rd1e1g/10/