css - 使用 PhotoShop 创建的填充颜色 svg

Question

我得到了这个在 photoshop 中创建并以 svg 格式保存的图标。

如何更改颜色填充？

-- 编辑--

我制作了这个 JS bin:https://jsbin.com/kazujoq/

SO 似乎删除了这段代码:xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEMAAAAeCAQAAADd02vRAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAAF3CculE8AAAAAmJLR0 QAAKqNIzIAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfhDAcMHSMd+lM1AAADSElEQVRIx83WX2iVdRzH8ZfHMzZqzrlyUVMHioPEgXqhSEkiQVfWMKErwz8oIgYRdCEYBdWVIIRZeRmRJV2 MQqygCRIRhLmy0OlEbbPN3FYHmjvzHLdfF3t29uy4nc45k9b3d3O+n+fz+z7v53u+zzm/OYqJhMc9odkiizxkoepIzxrQ5zdXnXfOeSNFVZsUoUjfeu/rF4pYf2q1TU2pGEEwp6Bngzc9 FX3+wzldevToN2zYg07iQ+0aNVntscg35BOHXbhf3XjAuxHqsFctn+ZBWnJZg+0+ kxYEoz61tJRuTBf1zuaafaFAhZY8bb59Lkfwr0nODGOhTsGot30suF4CBiRs97sg+N7i8jGq/CDieAEvl4EB1Y4JgpvWlovxgSB4kRlgwBaDgkGbysF4RhB8FGWvCG5MuT8pCLYUfNR NguB2oY5M9cI+7DmvW4whnaBRLS4Zvmf/PEtxS28BjFqNIKVdSkqfSy7okIpjxONRe7UZKepnaubrV+/YMNaCiS9ls2+N/kcA8dVpt+QERu8sIIyvsxaNY6RmESP4UTJImO1Y43n/Awye/T eMv+/jzaav1TQdRtph61WpUWmdQ27P4Pa3HbJOpRpV1jssfY8jOkTlj+gZDXnGem1lDmCb+rxaDc7keboCTuaJX6nAEkd0SLnsqGWY64syID43F8scdVlKhyOWoMLXeb6T8oRetdhsMK YN2Ypq3SVCdKvGVkMxbdBm1LqZ581L96NZWnDLQS0O6BFkrMbOEjF2Yo2MoMcBLQ66JUhrxv5CGHfVoVXQnZuPR1wTnEKNOyVA3DEPXwqu5eajQbegFXXuTo/RgYS0YG9sqHYIsirRXg LGOVTKCnbEau0TpCXQEXcnxP9pb2CBKvwSU39CUj26S3hRe1EvGe0fj59RZQG6YmpIesnT0akj4xhSsios913OtAKj+vGWtMqiIDLeQ79RCSu05/QmZKXwhr+iWsE3U5U4JbiiLsrmuyg4 XUIf4nFacNH8KKtzJZqziUaMjcYUsVZWcNUeG+3WKRjxZJkYG4wYO1lstMdVQXbykXB6DLbJxAYoa1eZELBLNlYrY9vky4UwWOm4PsGAE1bNAAJWOWFA0Oe4lfkXxzD+AbFgJVHPGGAuAAA AAElFTkSuQmCC”。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="99" height="65" viewBox="0 0 99 65">
  <metadata><?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c140 79.160451, 2017/05/06-01:08:21        ">
   <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="Vector_Smart_Object" data-name="Vector Smart Object" x="14" y="19" width="67" height="30" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEMAAAAeCAQAAADd02vRAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfhDAcMHSMd+lM1AAADSElEQVRIx83WX2iVdRzH8ZfHMzZqzrlyUVMHioPEgXqhSEkiQVfWMKErwz8oIgYRdCEYBdWVIIRZeRmRJV2MQqygCRIRhLmy0OlEbbPN3FYHmjvzHLdfF3t29uy4nc45k9b3d3O+n+fz+z7v53u+zzm/OYqJhMc9odkiizxkoepIzxrQ5zdXnXfOeSNFVZsUoUjfeu/rF4pYf2q1TU2pGEEwp6Bngzc9FX3+wzldevToN2zYg07iQ+0aNVntscg35BOHXbhf3XjAuxHqsFctn+ZBWnJZg+0+kxYEoz61tJRuTBf1zuaafaFAhZY8bb59Lkfwr0nODGOhTsGot30suF4CBiRs97sg+N7i8jGq/CDIeAEvl4EB1Y4JgpvWlovxgSB4kRlgwBaDgkGbysF4RhB8FGWvCG5MuT8pCLYUfNRNguB2oY5M9cI+7DmvW4whnaBRLS4Zvmf/PEtxS28BjFqNIKVdSkqfSy7okIpjxONRe7UZKepnaubrV+/YMNaCiS9ls2+N/kcA8dVpt+QERu8sIIyvsxaNY6RmESP4UTJImO1Y43n/Awye/TeMv+/jzaav1TQdRtph61WpUWmdQ27P4Pa3HbJOpRpV1jssfY8jOkTlj+gZDXnGem1lDmCb+rxaDc7keboCTuaJX6nAEkd0SLnsqGWY64syID43F8scdVlKhyOWoMLXeb6T8oRetdhsMKYN2Ypq3SVCdKvGVkMxbdBm1LqZ581L96NZWnDLQS0O6BFkrMbOEjF2Yo2MoMcBLQ66JUhrxv5CGHfVoVXQnZuPR1wTnEKNOyVA3DEPXwqu5eajQbegFXXuTo/RgYS0YG9sqHYIsirRXgLGOVTKCnbEau0TpCXQEXcnxP9pb2CBKvwSU39CUj26S3hRe1EvGe0fj59RZQG6YmpIesnT0akj4xhSsios913OtAKj+vGWtMqiIDLeQ79RCSu05/QmZKXwhr+iWsE3U5U4JbiiLsrmuyg4XUIf4nFacNH8KKtzJZqziUaMjcYUsVZWcNUeG+3WKRjxZJkYG4wYO1lstMdVQXbykXB6DLbJxAYoa1eZELBLNlYrY9vky4UwWOm4PsGAE1bNAAJWOWFA0Oe4lfkXxzD+AbFgJVHPGGAuAAAAAElFTkSuQmCC"/>
</svg>

Answer 1

转换为 svg 的位图无法使用通常的方法进行样式化:fill: orange;
但是你可以使用 SVG filters 完全改变它的颜色

Browser support SVG filter

为了填充颜色，我将使用滤镜基元 feColorMatrix

此过滤器应用矩阵转换:

理论看起来很吓人，但实际上在实践中使用过滤器是相当容易的。

要填充红色，我将使用以下矩阵:

    <filter id="RedFilter" x="-20" y="-20" width="150" height="150">
            <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>

"1"在第一行，负责红色，在第四行——alpha channel 负责透明度。

下面是红色填充的完整代码:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="99" height="65" viewBox="0 0 99 65"
> 

  <defs>
 <filter id="RedFilter" x="-20" y="-20" width="150" height="150">
        <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"   x="14" y="19" width="67" height="30" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEMAAAAeCAQAAADd02vRAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfhDAcMHSMd+lM1AAADSElEQVRIx83WX2iVdRzH8ZfHMzZqzrlyUVMHioPEgXqhSEkiQVfWMKErwz8oIgYRdCEYBdWVIIRZeRmRJV2MQqygCRIRhLmy0OlEbbPN3FYHmjvzHLdfF3t29uy4nc45k9b3d3O+n+fz+z7v53u+zzm/OYqJhMc9odkiizxkoepIzxrQ5zdXnXfOeSNFVZsUoUjfeu/rF4pYf2q1TU2pGEEwp6Bngzc9FX3+wzldevToN2zYg07iQ+0aNVntscg35BOHXbhf3XjAuxHqsFctn+ZBWnJZg+0+kxYEoz61tJRuTBf1zuaafaFAhZY8bb59Lkfwr0nODGOhTsGot30suF4CBiRs97sg+N7i8jGq/CDIeAEvl4EB1Y4JgpvWlovxgSB4kRlgwBaDgkGbysF4RhB8FGWvCG5MuT8pCLYUfNRNguB2oY5M9cI+7DmvW4whnaBRLS4Zvmf/PEtxS28BjFqNIKVdSkqfSy7okIpjxONRe7UZKepnaubrV+/YMNaCiS9ls2+N/kcA8dVpt+QERu8sIIyvsxaNY6RmESP4UTJImO1Y43n/Awye/TeMv+/jzaav1TQdRtph61WpUWmdQ27P4Pa3HbJOpRpV1jssfY8jOkTlj+gZDXnGem1lDmCb+rxaDc7keboCTuaJX6nAEkd0SLnsqGWY64syID43F8scdVlKhyOWoMLXeb6T8oRetdhsMKYN2Ypq3SVCdKvGVkMxbdBm1LqZ581L96NZWnDLQS0O6BFkrMbOEjF2Yo2MoMcBLQ66JUhrxv5CGHfVoVXQnZuPR1wTnEKNOyVA3DEPXwqu5eajQbegFXXuTo/RgYS0YG9sqHYIsirRXgLGOVTKCnbEau0TpCXQEXcnxP9pb2CBKvwSU39CUj26S3hRe1EvGe0fj59RZQG6YmpIesnT0akj4xhSsios913OtAKj+vGWtMqiIDLeQ79RCSu05/QmZKXwhr+iWsE3U5U4JbiiLsrmuyg4XUIf4nFacNH8KKtzJZqziUaMjcYUsVZWcNUeG+3WKRjxZJkYG4wYO1lstMdVQXbykXB6DLbJxAYoa1eZELBLNlYrY9vky4UwWOm4PsGAE1bNAAJWOWFA0Oe4lfkXxzD+AbFgJVHPGGAuAAAAAElFTkSuQmCC" /> 
   </defs> 
   <use xlink:href="#Vector_Smart_Object" filter="url(#RedFilter)" ></use>
   
   
</svg>

要填充其他颜色，需要对矩阵进行微小的更改。第二行中的绿色为“1”，该行的其余部分(alpha channel 除外)为零。

在下面的示例中，<use>使用命令，这使得可以通过对它们应用具有不同矩阵公式的过滤器来为克隆着色不同的颜色。

             <use xlink:href="#Vector_Smart_Object" x="0" y="0"  filter="url(#RedFilter)" ></use> 
             <use xlink:href="#Vector_Smart_Object" x="100" y="0" filter="url(#GreenFilter)" ></use> 
             <use xlink:href="#Vector_Smart_Object" x="200" y="0" filter="url(#BlueFilter)" ></use>     

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="65" viewBox="0 0 400 65"
> 

  <defs>
 <filter id="RedFilter" x="-20" y="-20" width="150" height="150">
        <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> 
	<filter id="GreenFilter" x="-20" y="-20" width="150" height="150">
        <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> 
	
	<filter id="BlueFilter" x="-20" y="-20" width="150" height="150">
        <feColorMatrix in="SourceGraphic" type="matrix"
                values="0 0 0 0 0
                        0 0 0 0 0
                        0 0 0 1 0
                        0 0 0 1 0
                "/>
    </filter>
 


   <image   id="Vector_Smart_Object"   x="14" y="19" width="67" height="30" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEMAAAAeCAQAAADd02vRAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfhDAcMHSMd+lM1AAADSElEQVRIx83WX2iVdRzH8ZfHMzZqzrlyUVMHioPEgXqhSEkiQVfWMKErwz8oIgYRdCEYBdWVIIRZeRmRJV2MQqygCRIRhLmy0OlEbbPN3FYHmjvzHLdfF3t29uy4nc45k9b3d3O+n+fz+z7v53u+zzm/OYqJhMc9odkiizxkoepIzxrQ5zdXnXfOeSNFVZsUoUjfeu/rF4pYf2q1TU2pGEEwp6Bngzc9FX3+wzldevToN2zYg07iQ+0aNVntscg35BOHXbhf3XjAuxHqsFctn+ZBWnJZg+0+kxYEoz61tJRuTBf1zuaafaFAhZY8bb59Lkfwr0nODGOhTsGot30suF4CBiRs97sg+N7i8jGq/CDIeAEvl4EB1Y4JgpvWlovxgSB4kRlgwBaDgkGbysF4RhB8FGWvCG5MuT8pCLYUfNRNguB2oY5M9cI+7DmvW4whnaBRLS4Zvmf/PEtxS28BjFqNIKVdSkqfSy7okIpjxONRe7UZKepnaubrV+/YMNaCiS9ls2+N/kcA8dVpt+QERu8sIIyvsxaNY6RmESP4UTJImO1Y43n/Awye/TeMv+/jzaav1TQdRtph61WpUWmdQ27P4Pa3HbJOpRpV1jssfY8jOkTlj+gZDXnGem1lDmCb+rxaDc7keboCTuaJX6nAEkd0SLnsqGWY64syID43F8scdVlKhyOWoMLXeb6T8oRetdhsMKYN2Ypq3SVCdKvGVkMxbdBm1LqZ581L96NZWnDLQS0O6BFkrMbOEjF2Yo2MoMcBLQ66JUhrxv5CGHfVoVXQnZuPR1wTnEKNOyVA3DEPXwqu5eajQbegFXXuTo/RgYS0YG9sqHYIsirRXgLGOVTKCnbEau0TpCXQEXcnxP9pb2CBKvwSU39CUj26S3hRe1EvGe0fj59RZQG6YmpIesnT0akj4xhSsios913OtAKj+vGWtMqiIDLeQ79RCSu05/QmZKXwhr+iWsE3U5U4JbiiLsrmuyg4XUIf4nFacNH8KKtzJZqziUaMjcYUsVZWcNUeG+3WKRjxZJkYG4wYO1lstMdVQXbykXB6DLbJxAYoa1eZELBLNlYrY9vky4UwWOm4PsGAE1bNAAJWOWFA0Oe4lfkXxzD+AbFgJVHPGGAuAAAAAElFTkSuQmCC" /> 
   </defs> 
   <use xlink:href="#Vector_Smart_Object" x="0" y="0"  filter="url(#RedFilter)" ></use> 
   <use xlink:href="#Vector_Smart_Object" x="100" y="0" filter="url(#GreenFilter)" ></use> 
    <use xlink:href="#Vector_Smart_Object" x="200" y="0" filter="url(#BlueFilter)" ></use>
   
   
</svg>