我想使用这种技术并更改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 >
当前回答
最简单的方法是使用https://icomoon.io/app/#/select之类的服务从SVG创建字体。上传你的SVG,点击“生成字体”,包括字体文件和CSS内容到你的侧,只是使用和样式它像任何其他文本。我总是这样使用它,因为它使造型更容易。
但正如@CodeMouse92评论的文章中提到的,图标字体会破坏屏幕阅读器(而且可能不利于SEO)。所以还是坚持使用svg吧。
其他回答
一个很好的方法是使用mixin来控制笔画颜色和填充颜色。我的“svg”被用作图标。
@mixin icon($color, $hoverColor) {
svg {
fill: $color;
circle, line, path {
fill: $color
}
&:hover {
fill: $hoverColor;
circle, line, path {
fill: $hoverColor;
}
}
}
}
然后你可以在你的SCSS文件中执行以下操作:
.container {
@include icon(white, blue);
}
简单地改变SVG文件的颜色:
转到SVG文件,在styles下面,在fill中提到颜色:
<style>.cls-1{fill: #FFFFFF;}</style>
对于Angular用户来说,"inline-svg-2" npm库非常有用:
https://www.npmjs.com/package/ng-inline-svg-2 将<img src="">替换为<div inlineSVG="path_to_assets"></div> 在屏幕的SCSS文件中设置CSS“color:” 在SVG图片中使用fill="currentColor"或stroke="currentColor"。
您现在可以动态配置CSS颜色,包括使用CSS变量,SVG将会适应。
注意:“currentColor”技巧只适用于内联svg,这就是为什么我们需要一个特殊的模块。
你不能用这种方法改变图像的颜色。如果将SVG作为图像加载,则无法在浏览器中使用CSS或JavaScript更改它的显示方式。
如果你想改变你的SVG图像,你必须使用<object>, <iframe>或使用< SVG > inline加载它。
如果希望使用页面中的技术,则需要Modernizr库,在该库中可以检查SVG支持,并有条件地显示或不显示备用图像。然后可以内联SVG并应用所需的样式。
See:
#time-3-icon { fill: green; } .my-svg-alternate { display: none; } .no-svg .my-svg-alternate { display: block; width: 100px; height: 100px; background-image: url(image.png); } <svg width="96px" height="96px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"> <path id="time-3-icon" d="M256,50C142.229,50,50,142.229,50,256c0,113.77,92.229,206,206,206c113.77,0,206-92.23,206-206 C462,142.229,369.77,50,256,50z M256,417c-88.977,0-161-72.008-161-161c0-88.979,72.008-161,161-161c88.977,0,161,72.007,161,161 C417,344.977,344.992,417,256,417z M382.816,265.785c1.711,0.297,2.961,1.781,2.961,3.518v0.093c0,1.72-1.223,3.188-2.914,3.505 c-37.093,6.938-124.97,21.35-134.613,21.35c-13.808,0-25-11.192-25-25c0-9.832,14.79-104.675,21.618-143.081 c0.274-1.542,1.615-2.669,3.181-2.669h0.008c1.709,0,3.164,1.243,3.431,2.932l18.933,119.904L382.816,265.785z"/> </svg> <image class="my-svg-alternate" width="96" height="96" src="ppngfallback.png" />
您可以内联SVG。用类名(my-svg-alternate)标记你的备份映像:
<svg width="96px" height="96px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path id="time-3-icon" .../>
</svg>
<image class="my-svg-alternate" width="96" height="96" src="ppngfallback.png" />
在CSS中使用Modernizr (CDN: http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js)的no-svg类来检查SVG支持。如果没有任何SVG支持,SVG块将被忽略,图像将被显示,否则图像将从DOM树中删除(display: none):
.my-svg-alternate {
display: none;
}
.no-svg .my-svg-alternate {
display: block;
width: 100px;
height: 100px;
background-image: url(image.png);
}
然后你可以改变你的内联元素的颜色:
#time-3-icon {
fill: green;
}
最简单的技巧是在页面加载时使用jQuery改变颜色。
$(document).ready(function () {
$('svg').find('path').attr('fill', '#FFF');
});
#FFF是你想要设置的颜色代码。