javascript 如何使用 CSS 在 HTML 中设置外部 SVG 颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28213417/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set a External SVG color in HTML using CSS?
提问by Abrar Jahin
I am trying to use SVG on my web page.
我正在尝试在我的网页上使用 SVG。
But it's color is black. So, I want it to be changed. So, I have done-
但它的颜色是黑色的。所以，我想改变它。所以，我已经做了——
.red_color_svg
{
color: red;
border: 5px solid currentColor;
fill: currentColor;
}<object type="image/svg+xml" data="https://rawcdn.githack.com/encharm/Font-Awesome-SVG-PNG/master/black/svg/heart.svg" class="weather_icon red_color_svg circle"></object>To import heart_border.svgfile and make its color red. But it does not work as you see i the output.
导入heart_border.svg文件并使其颜色为红色。但正如您在输出中看到的那样，它不起作用。
Can anyone help me please to solve this?
任何人都可以帮我解决这个问题吗？
Thank you very much in advance for helping.
非常感谢您的帮助。
采纳答案by Linus
The problem is that you don't target the actual SVG element, you target the "SVG container". To be able to change the color of one of the elements inside the SVG you have to target that specific element.
问题是您没有针对实际的 SVG 元素，而是针对“SVG 容器”。为了能够更改 SVG 内元素之一的颜色，您必须以该特定元素为目标。
E.g change the fill color of all paths in a SVG:
例如，更改 SVG 中所有路径的填充颜色：
.weather_icon path {
fill: yellow;
}
If you want to make it easier to handle add class names to the different elements inside the svg.
如果您想更轻松地处理将类名添加到 svg 中的不同元素。
<path class="my-class" ......... />
This will make it possible to target a specific element by its class:
这将使按其类定位特定元素成为可能：
.weather_icon .my-class {
fill:blue;
stroke:green;
}
回答by Robert Longson
CSS does not apply cross document and you've two documents here heart_border.svg and the container html document.
CSS 不适用跨文档，您在这里有两个文档 heart_border.svg 和容器 html 文档。
You need to include the CSS in heart_border.svg e.g. by adding a <link>element or an <xml-stylesheet>processing instruction or by adding it inline in that file via a <style>element.
您需要在 heart_border.svg 中包含 CSS，例如通过添加<link>元素或<xml-stylesheet>处理指令或通过元素将其内联添加到该文件中<style>。
Alternatively if you add the SVG inline in the html document itself so that you only have one document the CSS will then apply.
或者，如果您在 html 文档本身中添加内联 SVG，以便您只有一个文档，那么 CSS 将应用。
回答by aadiene
This thread is old but I wanted to share my solution, based on SVG filters. You just need to define a feColorMatrixfilter as you want and apply it to the external image. See example below for more details.
这个线程很旧，但我想分享我的解决方案，基于SVG 过滤器。您只需要根据需要定义feColorMatrix过滤器并将其应用于外部图像。有关更多详细信息，请参见下面的示例。
Compatible with any browsers that can handle SVG.
兼容任何可以处理 SVG 的浏览器。
<svg width="100%" height="100%" class="draggable">
<defs>
<filter id="customColor1">
<!-- Match hex color for #50A -->
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="0 0 0 0 0.3333333333333333 0 0 0 0 0 0 0 0 0 0.6666666666666666 0 0 0 1 0"
></feColorMatrix>
</filter>
<filter id="customColor2">
<!-- Match hex color for #0F0 -->
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0"
></feColorMatrix>
</filter>
</defs>
<image href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/icon-bike-black.svg" width="50" height="50"></image>
<image href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/icon-bike-black.svg" filter="url(#customColor1)" width="50" height="50" x="100"></image>
<image href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/icon-bike-black.svg" filter="url(#customColor2)" width="50" height="50" x="200"></image>
</svg>[BONUS]
[奖金]
// A little helper to generate matrix color from source and destination colors
// To easily dive in : https://codepen.io/jacobberglund/pen/ORNQAr
// To understand what's going on here read this article by A List Apart
// https://alistapart.com/article/finessing-fecolormatrix/
interface RgbColor {
/** Values are in percent (ex: 255,127,0,255 => 1,0.5,0,1) */
r: number;
g: number;
b: number;
a: number;
}
export class ColorMatrixHelper {
public static getMatrix(hexColor: string) {
const rgbColor: RgbColor = ColorMatrixHelper.hexToRgb(hexColor);
return ColorMatrixHelper.computeMatrixColor(rgbColor);
}
// Inspired by this answer : https://stackoverflow.com/a/5624139/11480016
private static hexToRgb(hex3or6): RgbColor {
// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
const hex6 = hex3or6.replace(shorthandRegex, (m, r, g, b) => r + r + g + g + b + b);
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i.exec(hex6);
const base = 1 / 255;
return result
? {
r: parseInt(result[1], 16) * base,
g: parseInt(result[2], 16) * base,
b: parseInt(result[3], 16) * base,
a: result[4] ? parseInt(result[4], 16) * base : 1,
}
: null;
}
private static computeMatrixColor(rgbColor: RgbColor): string {
let matrix;
if (rgbColor) {
// Ignore original colors and apply the new one
matrix =
`0 0 0 0 ${rgbColor.r} ` + // Red
`0 0 0 0 ${rgbColor.g} ` + // Green
`0 0 0 0 ${rgbColor.b} ` + // Blue
`0 0 0 ${rgbColor.a} 0`; // Alpha
} else {
// Identity (keep orignal colors)
matrix =
`1 0 0 0 0 ` + // Red
`0 1 0 0 0 ` + // Green
`0 0 1 0 0 ` + // Blue
`0 0 0 1 0`; // Alpha
}
return matrix;
}
}
回答by Danield
With your current code you set the fill on the objectelement.
使用您当前的代码在object元素上设置填充。
Instead, you need to set it on the svgelement.
相反，您需要在svg元素上设置它。
Something like this:
像这样的东西：
.red_color_svg svg {
fill: currentColor;
}
回答by marek
Do you really need SVG to be external file? you might want to put svg locally once in document.
你真的需要 SVG 作为外部文件吗？您可能希望在文档中将 svg 放在本地一次。
<div style="display: none">
<svg><g id="svg1"><path d="some exampe path"/></g></svg>
</div>
And link to it in several places
并在几个地方链接到它
<svg viewBox="0 0 64 64"><use xlink:href="#svg1"></use></svg>
Than you can style every link separately
比您可以单独设置每个链接的样式
