我想使用这种技术并更改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 >
当前回答
2022 Web组件<load-file>回答
这个(8行)原生Web组件加载外部内容，并将其注入DOM。
在一篇DEV博客文章中对此进行了解释和记录:<load-file> Web Component。
完整的源代码:
customElements.define("load-file", class extends HTMLElement { // declare default connectedCallback as sync so await can be used async connectedCallback( // call connectedCallback with parameter to *replace* SVG (of <load-file> persists) src = this.getAttribute("src"), // attach a shadowRoot if none exists (prevents displaying error when moving Nodes) // declare as parameter to save 4 Bytes: 'let ' shadowRoot = this.shadowRoot || this.attachShadow({mode:"open"}) ) { // load SVG file from src="" async, parse to text, add to shadowRoot.innerHTML shadowRoot.innerHTML = await (await fetch(src)).text() // append optional <tag [shadowRoot]> Elements from inside <load-svg> after parsed <svg> shadowRoot.append(...this.querySelectorAll("[shadowRoot]")) // if "replaceWith" attribute // then replace <load-svg> with loaded content <load-svg> // childNodes instead of children to include #textNodes also this.hasAttribute("replaceWith") && this.replaceWith(...shadowRoot.childNodes) } }) <load-file src="//load-file.github.io/heart.svg"> <!-- elements inside load-file are MOVED to shadowDOM --> <style shadowRoot> svg { height: 180px; /* Stack Overflow subwindow height */ } path:nth-child(2n+2) { fill: GREEN; /* shadowDOM style does NOT style global DOM */ } </style> </load-file>
其他回答
最简单的方法是使用https://icomoon.io/app/#/select之类的服务从SVG创建字体。上传你的SVG，点击“生成字体”，包括字体文件和CSS内容到你的侧，只是使用和样式它像任何其他文本。我总是这样使用它，因为它使造型更容易。
但正如@CodeMouse92评论的文章中提到的，图标字体会破坏屏幕阅读器(而且可能不利于SEO)。所以还是坚持使用svg吧。
只需在图像的svg标签中添加fill:"desiredColor"即可: 例子:
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#bbb9c6">
<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
最简单的技巧是在页面加载时使用jQuery改变颜色。
$(document).ready(function () {
$('svg').find('path').attr('fill', '#FFF');
});
#FFF是你想要设置的颜色代码。
例如，在你的HTML中:
<body>
<svg viewBox="" width="" height="">
<path id="struct1" fill="#xxxxxx" d="M203.3,71.6c-.........."></path>
</svg>
</body>
使用jQuery:
$("#struct1").css("fill", "<desired colour>");
我添加了一个测试页面-通过滤镜设置为SVG着色:
例如,
滤镜:反色(0.5)棕色(1)饱和(5)色相旋转(175度)
上传和着色您的SVG - Jsfiddle
我的想法来自:在图像标签SVGs上交换填充颜色
