解释

Question

我有一种化合物加载为svg：

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

它有原始颜色，我需要将其变为橙色（所有这些都是字母，键和原子）。

我试过这个：

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

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

Answer 1

由于您的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>

解释

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

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

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

Answer 2

好的，这是你想知道的一些东西..

svg只是xml ..

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

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

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

正确选择svg节点，执行此操作

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

-

接下来在javascript jquery中，.children（）方法只会向下移动一级，你想要更进一步..

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

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

示例： 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)" 
    });
});

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

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

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

Answer 3

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

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

这个小提琴中的奖励是，我包含了你的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');
});

如何更改svg绘图的颜色？

3 个答案:

解释