Question

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

如何更改颜色填充？

- 编辑 -

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

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

以下是填写红色的完整代码：

＆＃13;

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

＆＃13;

如果要填充其他颜色，则需要对矩阵进行微小更改。绿色是＆＃34; 1＆＃34;在第二行中，除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>

＆＃13;

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

＆＃13;

Answer 2

正如其他人所说，如果您使用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;
}

Answer 3

您需要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;
}

Answer 4

进行形状修改（如果还没有的话）。然后，不要通过“文件”菜单中的“导出为..”导出SVG文件，而是右键单击形状图层，然后单击“复制SVG”。将此粘贴到空白文档中，并将其另存为.svg文件。它将具有fill属性。

用PhotoShop创建填充颜色svg

4 个答案: