html
<img src="logo.svg" alt="Logo" class="logo-img">
css
.logo-img path {
fill: #000;
}
上面的svg加载并本机填充:#fff,但当我使用上面的css尝试将其更改为黑色时,它没有改变,这是我第一次使用svg,我不知道为什么它不工作。
html
<img src="logo.svg" alt="Logo" class="logo-img">
css
.logo-img path {
fill: #000;
}
上面的svg加载并本机填充:#fff,但当我使用上面的css尝试将其更改为黑色时,它没有改变,这是我第一次使用svg,我不知道为什么它不工作。
当前回答
我只想改变特定的路径和/或颜色,甚至不同的路径上色。此外,在我的情况下,一些CSS被应用到img标签直接,因此我想让它是原始的img元素,而不是混乱的定位和对齐。
感谢这个答案的启发:https://stackoverflow.com/a/43015413/1444589,这对我来说很有效:
let img = document.querySelector('img[class^="YourClassName"]');
let imgURL = img.src;
fetch(imgURL)
.then(response => response.text())
.then(text => {
let parser = new DOMParser();
let xmlDoc = parser.parseFromString(text, 'text/xml');
let svg = xmlDoc.getElementsByTagName('svg')[0];
let paths = xmlDoc.getElementsByTagName('path');
// access individual path elements directly
let leftShape = paths[0];
leftShape.setAttribute('fill', '#4F4F4F');
// or find specific color
const pathsArr = Array.from(paths);
let skirtShape = pathsArr.find(path => path.getAttribute('fill') === '#F038A5');
skirtShape.setAttribute('fill', '#0078D6');
// Replace old SVG with colorized SVG
// positioning and alignment is left untouched
let base64Str = btoa(new XMLSerializer().serializeToString(svg));
img.src = 'data:image/svg+xml;base64, ' + base64Str;
});
其他回答
如果你的形状总是一种纯色,而且你有两个以上的纯色,你可以使用Fontello,用你自己的一系列自定义SVG形状制作一个自定义图标字体。然后你可以单独用CSS设置/动画它们的大小和颜色。
对于这个问题的所有可能的用例,这是一个需要考虑的基本范例。我在很多项目中都使用过它。无论如何,如果你没有听说过Fontello,你需要去了解一下。如果你知道一个类似的更好的解决方案,我很想知道。
可能的失败:
众所周知,图标/形状字体会干扰屏幕阅读器,所以这可能需要一些处理。 Fontello在导入形状时可能很挑剔,在创建和导出形状时可能需要一些尝试和错误。 避免任何和所有分组,只使用单一的非嵌套复合形状。
如果你的目标只是改变logo的颜色,你不一定需要使用CSS,那么不要使用javascript或jquery,因为之前的一些回答建议。
要精确地回答最初的问题,只需:
在文本编辑器中打开logo.svg。 寻找fill: #fff并将其替换为fill: #000
例如,你的logo.svg在文本编辑器中打开时可能是这样的:
<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" fill="#fff"/>
</svg>
... 只需更改填充并保存。
我只想改变特定的路径和/或颜色,甚至不同的路径上色。此外,在我的情况下,一些CSS被应用到img标签直接,因此我想让它是原始的img元素,而不是混乱的定位和对齐。
感谢这个答案的启发:https://stackoverflow.com/a/43015413/1444589,这对我来说很有效:
let img = document.querySelector('img[class^="YourClassName"]');
let imgURL = img.src;
fetch(imgURL)
.then(response => response.text())
.then(text => {
let parser = new DOMParser();
let xmlDoc = parser.parseFromString(text, 'text/xml');
let svg = xmlDoc.getElementsByTagName('svg')[0];
let paths = xmlDoc.getElementsByTagName('path');
// access individual path elements directly
let leftShape = paths[0];
leftShape.setAttribute('fill', '#4F4F4F');
// or find specific color
const pathsArr = Array.from(paths);
let skirtShape = pathsArr.find(path => path.getAttribute('fill') === '#F038A5');
skirtShape.setAttribute('fill', '#0078D6');
// Replace old SVG with colorized SVG
// positioning and alignment is left untouched
let base64Str = btoa(new XMLSerializer().serializeToString(svg));
img.src = 'data:image/svg+xml;base64, ' + base64Str;
});
在您的案例中,主要问题是您从<img>标记导入svg,该标记将隐藏svg结构。
您需要将<svg>标记与<use>结合使用以获得所需的效果。要使其工作,您需要在SVG文件<path id='myName'…>,然后能够从<use xlink:href="#myName"/>标签检索它们。 试试下面剪的。
.icon { display: inline-block; width: 2em; height: 2em; transition: .5s; fill: currentColor; stroke-width: 5; } .icon:hover { fill: rgba(255,255,255,0); stroke: black; stroke-width: 2; } .red { color: red; } .blue { color: blue; } <svg width="0" height="0"> <defs> <path id="home" d="M100 59.375l-18.75-18.75v-28.125h-12.5v15.625l-18.75-18.75-50 50v3.125h12.5v31.25h31.25v-18.75h12.5v18.75h31.25v-31.25h12.5z"/> </svg> <span class="icon red"> <svg viewbox="0 0 100 100"> <use xlink:href="#home"/> </svg> </span> <span class="icon blue"> <svg viewbox="0 0 100 100"> <use xlink:href="#home"/> </svg> </span>
注意,如果您想从外部源加载SVG(而不是将其嵌入到HTML中),则可以将任何URL放在片段#之前。另外,通常不需要在CSS中指定填充。最好考虑在SVG本身中使用fill:"currentColor"。相应元素的CSS颜色值将被使用到位。
因此,您必须将SVG作为内联HTML使用。
说这是你的logo.svg代码(当你在textEditor上打开它):
Logo.SVG
<svg width="139" height="100" xmlns="http://www.w3.org/2000/svg">
<!-- Note that I've Added Class Attribute 'logo-img' Here -->
<g transform="translate(-22 -45)" fill="none" fill-rule="evenodd">
<path
d="M158.023 48.118a7.625 7.625 0 01-.266 10.78l-88.11 83.875a7.625 7.625 0 01-10.995-.5l-33.89-38.712a7.625 7.625 0 0111.475-10.045l28.653 32.73 82.353-78.394a7.625 7.625 0 0110.78.266z"
fill="#00000" />
</g>
</svg>
添加你想要的Class/ID到它(我添加了'logo-img'):
编辑Svg
<svg class="logo-img" width="139" height="100" xmlns="http://www.w3.org/2000/svg">
<!-- Note that I've Added Class Attribute 'logo-img' Here -->
...
</svg>
现在应用你的Css规则:
CSS
.logo-img path {
fill: #000;
}
Pro
通过这种方式,您可以对用户的操作(悬停,选中,…)进行动画化。
Con
你的HTML文件会一团糟。
这里是一个堆栈片段
<style> body { display: flex; justify-content: center; } .logo-img path { transition: .5s all linear; } .logo-img path { fill: coral; } .logo-img:hover path{ fill: darkblue; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <svg class="logo-img" width="139" height="100" xmlns="http://www.w3.org/2000/svg"> <!-- Note that I've Added Class Attribute 'logo-img' Here --> <g transform="translate(-22 -45)" fill="none" fill-rule="evenodd"> <path d="M158.023 48.118a7.625 7.625 0 01-.266 10.78l-88.11 83.875a7.625 7.625 0 01-10.995-.5l-33.89-38.712a7.625 7.625 0 0111.475-10.045l28.653 32.73 82.353-78.394a7.625 7.625 0 0110.78.266z" fill="#00000" /> </g> </svg> </body> </html>