我想使用这种技术并更改SVG颜色，但到目前为止我还不能这样做。我在CSS中使用这个，但我的图像总是黑色的，无论如何。
我的代码:
.change-my-color { 填充:绿色; ｝ svg < > <image class="change-my-color" xlink:href="https://svgur.com/i/AFM.svg" width="96" height="96" src=" ppngback .png" /> < / svg >
当前回答
我发现它有点笨拙，但它绝对是一种动态改变<img>标记中包含的SVG颜色的工作方式。
在SVG文件中，您可以通过以下方式添加CSS内容:
<svg ...>
<defs>
<style>
...
<style>
<defs>
在这里可以使用@media规则，SVG可以使用该规则查看自身以外的上下文环境。有一个宽高比媒体特性应用于SVG框(例如，<img>标记)。您可以通过稍微拉伸SVG框来为SVG创建不同的上下文。
通过这种方式，您还可以使favicon与网站上出现的SVG相同，但使用不同的颜色。(在这种情况下，其他SVG框不应该是方形的。)
/* img stretched horizontally (if SVG is square-shaped) */
@media (min-aspect-ratio: 1000/999) {
path {
fill: blue;
}
}
/* img stretched vertically (if SVG is square-shaped) */
@media (max-aspect-ratio: 999/1000) {
path {
fill: green;
}
}
/* img with exact sizes */
@media (aspect-ratio: 86/74) {
path {
fill: red;
}
}
/* favicon with light browser theme */
@media (aspect-ratio: 1/1) and (prefers-color-scheme: light) {
path {
fill: black;
}
}
/* favicon with dark browser theme */
@media (aspect-ratio: 1/1) and (prefers-color-scheme: dark) {
path {
fill: white;
}
}
有一点很重要
SVG必须包含viewBox信息，这样拉伸就不会影响图形。例子:
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300">
其他回答
如果使用一些技巧，可以用CSS改变SVG着色。 我为此写了一个小脚本。
浏览包含SVG图像的元素列表 将SVG文件加载为XML 只获取SVG部分 改变路径颜色 将src替换为修改后的SVG图像作为内联图像
$('img.svg-changeable').each(function () {
var $e = $(this);
var imgURL = $e.prop('src');
$.get(imgURL, function (data) {
// Get the SVG tag, ignore the rest
var $svg = $(data).find('svg');
// Change the color
$svg.find('path').attr('fill', '#000');
$e.prop('src', "data:image/svg+xml;base64," + window.btoa($svg.prop('outerHTML')));
});
});
上面的代码可能无法正常工作。我已经为带有SVG背景图像的元素实现了这一点，其工作原理几乎类似于此。
但是无论如何，您必须修改这个脚本以适应您的情况。
你不应该直接在SVG图像上设置颜色，如果你想编程SVG的颜色。
在2021年，您可以使用以下CSS内容进行颜色更改。
html { --iron-icon-fill-color-1: green; --iron-icon-fill-color-2: red; --iron-icon-stroke-color: white; } svg#icon-green { fill: var(--iron-icon-fill-color-1, currentcolor); stroke: var(--iron-icon-stroke-color, none); } svg#icon-red { fill: var(--iron-icon-fill-color-2, currentcolor); stroke: var(--iron-icon-stroke-color, none); } svg#icon { fill: var(--iron-icon-fill-color-x, currentcolor); stroke: white; } <html> <body> <svg id="icon-green" xmlns="http://www.w3.org/2000/svg" width="40px" height="40px" style="vertical-align:text-bottom" viewbox="0 0 40 40"> <circle cx="20" cy="20" r="18" stroke-width="3"/> <path d="M 10,10 30,30 M 10,30 30,10" fill="none" stroke-width="6"/> </svg> <svg id="icon-red" xmlns="http://www.w3.org/2000/svg" width="40px" height="40px" style="vertical-align:text-bottom" viewbox="0 0 40 40"> <circle cx="20" cy="20" r="18" stroke-width="3"/> <path d="M 10,10 30,30 M 10,30 30,10" fill="none" stroke-width="6"/> </svg> <svg id="icon" xmlns="http://www.w3.org/2000/svg" width="40px" height="40px" style="vertical-align:text-bottom" viewbox="0 0 40 40"> <circle cx="20" cy="20" r="18" stroke-width="3"/> <path d="M 10,10 30,30 M 10,30 30,10" fill="none" stroke-width="6"/> </svg> </body> </html>
您可以使用字体图标来使用SVG中的任何CSS选项
我正在寻找一种方法来拥有任何CSS选项，如SVG的动画，我最终用我的SVG生成一个字体图标，然后在一个跨度内使用它(如font Awesome)，因此任何CSS选项，如着色，都是可用的。
我使用https://icomoon.io将SVG图像转换为字体图标。然后你可以像Font Awesome或MaterialIcon一样在HTML元素中使用它。
我的答案是。但我不确定它是否对每个人都适用:
选择“svg”，然后选择“path”。然后你可以改变'fill'。
.eye-icon-container {
width: 33px;
height: 33px;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
:hover {
background-color: #ddf0ff;
}
:active {
background-color: #1d398d;
svg {
path {
fill: #fff;
}
}
}
}
2020的答案
CSS过滤器适用于所有当前的浏览器
改变任何SVGs的颜色
Add the SVG image using an <img> tag. <img src="dotted-arrow.svg" class="filter-green"/> To filter to a specific color, use the following Codepen (click here to open the codepen) to convert a hexadecimal color code to a CSS filter: For example, output for #00EE00 is filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%); Add the CSS filter into this class. .filter-green{ filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%); }
