使用 PhotoShop 创建的填充颜色 svg答案

【问题标题】：fill color svg created with PhotoShop使用 PhotoShop 创建的填充颜色 svg
【发布时间】：2018-05-21 13:30:43
【问题描述】：

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

如何更改颜色填充？

-- 编辑--

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

SO似乎切出验证码的xlink：HREF =“数据：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 rxaDc7keboCTuaJX6nAEkd0SLnsqGWY64syID43F8scdVlKhyOWoMLXeb6T8oRetdhsMKYN2Ypq3SVCdKvGVkMxbdBm1L qZ581L96NZWnDLQS0O6BFkrMbOEjF2Yo2MoMcBLQ66JUhrxv5CGHfVoVXQnZuPR1wTnEKNOyVA3DEPXwqu5eajQbegFXXuTo / RgYS0YG9sqHYIsirRXgLGOVTKCnbEau0TpCXQEXcnxP9pb2CBKvwSU39CUj26S3hRe1EvGe0fj59RZQG6YmpIesnT0akj4xhSsios913OtAKj + vGWtMqiIDLeQ79RCSu05 / QmZKXwhr + iWsE3U5U4JbiiLsrmuyg4XUIf4nFacNH8KKtzJZqziUaMjcYUsVZWcNUeG + 3WKRjxZJkYG4wYO1lstMdVQXbykXB6DLbJxAYoa1eZELBLNlYrY9vky4UwWOm4PsGAE1bNAAJWOWFA0Oe4lfkXxzD + AbFgJVHPGGAuAAAAAElFTkSuQmCC”。 P>

<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>

【问题讨论】：

基本上我不认为你可以。 Illustrator 可以导出 SVG 代码，而不是嵌入 base-64 图像。
但是 - stackoverflow.com/questions/22384934/…
我创建了这个 JS bin：jsbin.com/kazujoq
这不是真正的 SVG，它是由 SVG 包裹的光栅图像。你真的无能为力。
谢谢罗伯特，这也是我的结论......！

标签： css svg

【解决方案1】：

如果您还没有，请制作图标的形状。然后，不要通过“文件”菜单中的“导出为..”来导出 SVG 文件，而是右键单击形状图层，然后单击“复制 SVG”。将此粘贴到空白文档中并将其保存为 .svg 文件。它将有一个填充属性。

【讨论】：

【解决方案2】：

您需要一个 HTML5 SVG 路径来执行此操作。您的 SVG 没有 d 属性。

例子：

<svg height="210" width="400">
  <path d="M150 0 L75 200 L225 200 Z" fill="none" />
</svg>

风格：

svg path {
    fill: #000;
}

【讨论】：

【解决方案3】：

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

Browser supportSVG 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 通道。

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

<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 通道是零。

在下面的示例中，使用了<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>

【讨论】：

【解决方案4】：

正如其他人所说，如果您使用 Illustrator 导出 SVG 代码，则可以控制其样式。例如，使用fill 改变颜色。

这是 JSFiddle 中的一个示例 - https://jsfiddle.net/ks1k2us6/2/

HTML -

<div class="wrapper">
  <div class="icon">

    <?xml version="1.0" encoding="utf-8"?>
      <!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
      <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="80px" height="70px" viewBox="0 0 1190.549 841.891" enable-background="new 0 0 1190.549 841.891" xml:space="preserve">
        <g>
          <g>
            <path d="M356.739,473.29c-38.684,0-70.158,31.473-70.158,70.158c0,38.685,31.473,70.158,70.158,70.158
            c38.685,0,70.158-31.473,70.158-70.158C426.897,504.764,395.425,473.29,356.739,473.29z M356.739,585.543
            c-23.208,0-42.095-18.887-42.095-42.095s18.887-42.095,42.095-42.095s42.095,18.887,42.095,42.095
            S379.947,585.543,356.739,585.543z" />
          </g>
        </g>
        <g>
          <g>
            <path d="M1002.189,473.29v-84.188c0-6.033-3.859-11.408-9.598-13.316l-79.166-26.393
            c-29.816-50.498-70.803-98.557-161.376-114.426c-0.168-0.028-0.337-0.056-0.505-0.084
            c-167.271-23.124-292.852,14.606-373.477,112.182c-60.013,0.87-121.275,13.414-157.308,36.482
            c-18.661,11.954-29.732,32.763-30.771,54.905l-1.628,34.84c-7.744,0-14.031,6.286-14.031,14.031v56.125
            c0,7.745,6.287,14.031,14.031,14.031h56.126c7.787,0,14.018-6.398,14.03-14.186c0-0.071,0.016-0.14,0.016-0.226
            c0.21-54.063,44.087-97.842,98.206-97.842c54.246,0,98.22,43.975,98.22,98.22c-1.009,8.518,5.711,14.031,14.031,14.031h252.567
            c7.787,0,14.018-6.397,14.03-14.186c0-0.07,0.014-0.14,0.014-0.226c0.21-54.063,44.087-97.842,98.207-97.842
            c54.245,0,98.22,43.975,98.22,98.221c-1.01,8.518,5.711,14.03,14.031,14.03h56.125c7.744,0,14.031-6.286,14.031-14.03v-56.126
            C1016.22,479.576,1009.934,473.29,1002.189,473.29z M623.338,339.992c0,3.872-3.143,7.017-7.017,7.017H433.337
            c-6.481,0-9.429-7.971-4.645-12.334c48.689-44.382,110.609-69.766,186.914-76.514c4.11-0.365,7.731,2.946,7.731,7.072V339.992z
             M791.912,340.062c-0.043,3.844-3.172,6.945-7.017,6.945H658.416c-3.872,0-7.016-3.143-7.016-7.017v-76.612
            c0-3.887,3.101-7.085,6.973-7.085c27.979-0.028,57.586,2.006,89.059,6.357c14.986,2.638,28.343,6.258,40.494,10.706
            c2.792,1.024,4.574,3.733,4.547,6.708L791.912,340.062z M865.143,347.007h-38.151c-3.9,0-7.057-3.186-7.016-7.086l0.364-38.024
            c0.057-5.794,6.665-8.938,11.338-5.515c15.169,11.084,27.782,24.289,39.021,39.275
            C874.206,340.327,870.979,347.007,865.143,347.007z" />
          </g>
        </g>
        <g>
          <g>
            <path d="M833.811,473.29c-38.685,0-70.158,31.473-70.158,70.158c0,38.685,31.473,70.158,70.158,70.158
            c38.684,0,70.158-31.473,70.158-70.158C903.967,504.764,872.494,473.29,833.811,473.29z M833.811,585.543
            c-23.208,0-42.095-18.887-42.095-42.095s18.887-42.095,42.095-42.095s42.095,18.887,42.095,42.095
            S857.019,585.543,833.811,585.543z" />
          </g>
        </g>
      </svg>


  </div>
  <h1>Cars</h1>
</div>

CSS -

.wrapper {
  display: flex;
}

svg {
  fill: green;
}

【讨论】：

谢谢。现在我需要了解如何在我的 react 组件中使用 SVG 图标。也许你也知道这个问题的答案？见这里：stackoverflow.com/questions/47699733/inline-svg-in-react-16
@olefrank 抱歉，我没有与 React 进行太多互动，尽管有任何 Vue 问题让我感到困惑。祝你好运！