我想使用这种技术并更改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 >
我想使用这种技术并更改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 >
当前回答
最简单的技巧是在页面加载时使用jQuery改变颜色。
$(document).ready(function () {
$('svg').find('path').attr('fill', '#FFF');
});
#FFF是你想要设置的颜色代码。
其他回答
如果你想动态改变颜色:
在代码编辑器中打开SVG 添加或重写每个路径的填充属性为fill="currentColor" 现在,svg将采用你的字体颜色,所以你可以做一些像这样的事情: svg { 颜色:“红色”; }
如果你想对一个内联SVG文件这样做,也就是说,例如,CSS内容中的背景图像:
背景:url(“数据:photo /svg+xml;charset=utf8,%3Csvg xml ='http://www.w3.org/2000/svg' fill='rgba(1.39,215.1)' viewBox=' ..3e % %3C/svg%3E’);
当然,替换…使用您的内联图像代码。
最简单的方法是使用https://icomoon.io/app/#/select之类的服务从SVG创建字体。上传你的SVG,点击“生成字体”,包括字体文件和CSS内容到你的侧,只是使用和样式它像任何其他文本。我总是这样使用它,因为它使造型更容易。
但正如@CodeMouse92评论的文章中提到的,图标字体会破坏屏幕阅读器(而且可能不利于SEO)。所以还是坚持使用svg吧。
如果使用一些技巧,可以用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中的任何CSS选项
我正在寻找一种方法来拥有任何CSS选项,如SVG的动画,我最终用我的SVG生成一个字体图标,然后在一个跨度内使用它(如font Awesome),因此任何CSS选项,如着色,都是可用的。
我使用https://icomoon.io将SVG图像转换为字体图标。然后你可以像Font Awesome或MaterialIcon一样在HTML元素中使用它。