如何从SVG图像中删除所有颜色？

Question

我有这个SVG图像，我需要擦除“所有”的颜色，包括前面的白光，背心和腹部，只看到轮廓的图像。我需要它干净的使用在一个我正在做的肚脐项目。这是我需要编辑的图片

Answer 1

可以使用筛选器：

1. 把你的图像变成灰阶：

<feColorMatrix type="matrix"
                     values="0.33 0.33 0.33 0 0
                             0.33 0.33 0.33 0 0
                             0.33 0.33 0.33 0 0
                             0 0 0 1 0"/>

​

​

1. 然后使用消隐颜色转换将黑色像素变为黑色，其他所有颜色都变为白色：

<feComponentTransfer>
    <feFuncR type="discrete" tableValues="0 1 1 1 1 1 1 1 1 1 "></feFuncR>
    <feFuncG type="discrete" tableValues="0 1 1 1 1 1 1 1 1 1 "></feFuncG>
    <feFuncB type="discrete" tableValues="0 1 1 1 1 1 1 1 1 1 "></feFuncB>
</feComponentTransfer>

​

​

1. 然后逆所有这些使轮廓变成白色，而其他的都是黑色的：

<feColorMatrix type="matrix" values="-1  0  0 0 1
                                      0 -1  0 0 1
                                      0  0 -1 0 1
                                      0  0  0 1 0"/>

​

​

1. 最后，从这个过滤的图像创建一个掩码，并将它应用到您的图像中。

<mask id="mask" viewBox="0 0 150 206">
    <rect width="150" height="206" fill="black"/>   
    <g filter="url(#nocolor_inv)">
      <!-- your image here -->
      <circle  cx="75" cy="103" r="65" fill="red" stroke="black" stroke-width="5"/>
    </g>
</mask>

​

​

​

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 612 792" enable-background="new 0 0 612 792" xml:space="preserve">
	 <filter id="nocolor_inv" filterUnits="objectBoundingBox"
            x="-5%" y="-5%" width="110%" height="110%">
						<feColorMatrix type="matrix"
                     values="0.33 0.33 0.33 0 0
                             0.33 0.33 0.33 0 0
                             0.33 0.33 0.33 0 0
                             0 0 0 1 0"/>
						<feComponentTransfer>
			        <feFuncR type="discrete" tableValues="0 1 1 1 1 1 1 1 1 1 "></feFuncR>
			        <feFuncG type="discrete" tableValues="0 1 1 1 1 1 1 1 1 1 "></feFuncG>
			        <feFuncB type="discrete" tableValues="0 1 1 1 1 1 1 1 1 1 "></feFuncB>
			      </feComponentTransfer>
						<feColorMatrix type="matrix" values="-1  0  0 0 1
                                                  0 -1  0 0 1
                                                  0  0 -1 0 1
                                                  0  0  0 1 0"/>

    </filter>
		<mask id="mask" viewBox="0 0 150 206">
			<rect width="150" height="206" fill="black"/>
			
      <g filter="url(#nocolor_inv)">
        <!-- your image here -->
        <circle  cx="75" cy="103" r="65" fill="red" stroke="black" stroke-width="5"/>
      </g>
		</mask>

    <g mask="url(#mask)">
        <!-- your image here -->
        <circle cx="75" cy="103" r="65" fill="red" stroke="black" stroke-width="5"/>
    </g>
</svg>

​