javascript - 如何更改 svg 绘图的颜色？

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，看看是否可以删除这个“讨厌的”属性。