Как я могу удалить все цвета из изображения SVG? - PullRequest
Новая
       37

Как я могу удалить все цвета из изображения SVG?

0 голосов
/ 12 января 2020

У меня есть это изображение SVG, и мне нужно стереть «все» цвета, включая белый свет спереди, жилет и живот, видя только контурные изображения. Мне нужно, чтобы он был чистым для использования в проекте navbar, который я делаю. Это изображение, которое мне нужно отредактировать

1 Ответ

0 голосов
/ 12 января 2020

Вы можете использовать фильтр, чтобы:

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

enter image description here

затем используйте преобразование цветового изображения, чтобы превратить черные пиксели в черный, а все остальное в белый: 
<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>

enter image description here

затем инвертируйте все это, чтобы контур был белым, а все остальное черным: 
<feColorMatrix type="matrix" values="-1  0  0 0 1
                                      0 -1  0 0 1
                                      0  0 -1 0 1
                                      0  0  0 1 0"/>

enter image description here

и, наконец, создайте маску из этого отфильтрованного изображения и примените ее к своему изображению. 
<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>

enter image description here enter image description here 

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