主页 / 问题 / 759453
Accepted
Kirill Donenko
Asked:2020-12-17 16:52:49 +0000 UTC2020-12-17 16:52:49 +0000 UTC

如何更改svg图标的颜色

  • 772

如何更改svg图标的颜色？该代码是使用插件从 Photoshop 获得的。添加属性 style="fill: #000;" 图像标签没有帮助。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="11" height="7" viewBox="0 0 11 7">
    <metadata><?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
    <x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c138 79.159824, 2016/09/14-01:09:01        ">
    <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
      <rdf:Description rdf:about=""/>
    </rdf:RDF>
    </x:xmpmeta>                          
    <?xpacket end="w"?></metadata>
    <image id="Векторный_смарт-объект" data-name="Векторный смарт-объект" width="11" height="7" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAHCAMAAADpsEdvAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAASFBMVEX////LlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEwAAAAImnxsAAAAFnRSTlMAuuEk7uIcQfbbFUJL+tMgVf1WYWv4Bvxq1AAAAAFiS0dEFwvWmI8AAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfhDBALEzW/LLJJAAAAQ0lEQVQI1y2LSxaAIBDDyldABkWg9z8qjs9smkUDYx0UZw08Q3w1BnocibmgZKYTqMJ2NUrV590p7M9XYZAc+Jlr6mxdTAJ2v5sYawAAAABJRU5ErkJggg=="/>
    </svg>

html

1 个回答

  1. Best Answer

    该图标是在光栅编辑器中制作的，很可能是在 Photoshop 插件中制作的，然后另存为data:image/png;base64. 该图标实际上仍然是一个位图，包裹在一个 SVG 包装器中，因此无法使用通常的方法通过 CSS 更改样式。

    这是图标放大 10 倍时的样子。在我看来，它与光栅完全没有区别。这种简单的图像最好在矢量编辑器中完成，例如Inkscape。它是免费的，但实现的功能足够丰富，同时简单直观，易于学习。

    在此处输入图像描述

    但什么是，是。在图像格式的情况下，base64有一些方法可以设置样式：

    应用过滤器

    使用<feColorMatrix它，您可以用任何颜色绘制图标。 

    <pre>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="11" height="7" viewBox="0 0 11 7">
<defs> 
 <filter id="RedFilter" x="0" y="0" width="14" height="10">
        <feColorMatrix in="SourceGraphic" type="matrix"
                values="0 0 0 1 0
                        0 0 0 0 0
                        0 0 0 0 0
                        0 0 0 1 0
                "/>
    </filter>
<image id="Vector_Smart_Object" data-name="Векторный смарт-объект" width="11" height="7" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAHCAMAAADpsEdvAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAASFBMVEX////LlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEwAAAAImnxsAAAAFnRSTlMAuuEk7uIcQfbbFUJL+tMgVf1WYWv4Bvxq1AAAAAFiS0dEFwvWmI8AAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfhDBALEzW/LLJJAAAAQ0lEQVQI1y2LSxaAIBDDyldABkWg9z8qjs9smkUDYx0UZw08Q3w1BnocibmgZKYTqMJ2NUrV590p7M9XYZAc+Jlr6mxdTAJ2v5sYawAAAABJRU5ErkJggg=="/>
</defs> 

 <use xlink:href="#Vector_Smart_Object" filter="url(#RedFilter)" ></use>
</svg> 

</pre>

    甚至在悬停时改变颜色： 

    <style>
#VSO:hover {
filter:url(#GreenFilter);
}
</style>
<pre>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="22" height="14" viewBox="0 0 11 7">
<defs> 

<filter id="WhiteFilter" x="0" y="0" width="14" height="10">
        <feColorMatrix in="SourceGraphic" type="matrix"
                values="0 0 0 1 0
                        0 0 0 1 0
                        0 0 0 1 0
                        0 0 0 1 0
                "/>
    </filter> 
 <filter id="GreenFilter" x="0" y="0" width="14" height="10">
        <feColorMatrix in="SourceGraphic" type="matrix"
                values="0 0 0 0 0
                        0 0 0 1 0
                        0 0 0 0 0
                        0 0 0 1 0
                "/>
    </filter> 
	
<image id="Vector_Smart_Object" data-name="Векторный смарт-объект" width="11" height="7" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAHCAMAAADpsEdvAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAASFBMVEX////LlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEzLlEwAAAAImnxsAAAAFnRSTlMAuuEk7uIcQfbbFUJL+tMgVf1WYWv4Bvxq1AAAAAFiS0dEFwvWmI8AAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfhDBALEzW/LLJJAAAAQ0lEQVQI1y2LSxaAIBDDyldABkWg9z8qjs9smkUDYx0UZw08Q3w1BnocibmgZKYTqMJ2NUrV590p7M9XYZAc+Jlr6mxdTAJ2v5sYawAAAABJRU5ErkJggg=="/>
</defs> 

 <use id="VSO" xlink:href="#Vector_Smart_Object"   ></use>
</svg> 

</pre>

    • 9

相关问题