Как убрать фоновую заливку в svg

15 ноября 2021, 02:00

Есть svg, он соединен через use с тегом path, в котором нарисован логотип из линий. На странице он отображается полностью залитым, а нужно, чтобы заливки не было, только обводка. Пытался изменить стиль заливки с помощью fill-rule, но это не помогает.

    <!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <header>
            <div class='logo'>
                <svg xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink"
                viewBox="200 50 600 550">
                    <use xlink:href='#logo'></use>
                </svg>
            </div>
            <nav>
            </nav>
        </header>
    <svg>
        <path id='logo' d='M 200 400 L 400 50 L 600 400 L 500 400 L 400 50 L 500 400 L 400 550 L 300 400 L 400 50 L 400 550 L 300 400 L 200 400 ' stroke='blue'></path>
    </svg>
    </body>
</html>

Answer 1

Вам уже правильно ответил @Alexey Ten в комментариях: чтобы убрать заливку цветом нужно добавить атрибут fill="none". Так как у вас не был указан этот атрибут, то SVG по умолчанию всё заливает чёрным цветом.

<!DOCTYPE html> 
<html> 
    <head> 
    </head> 
    <body> 
        <header> 
            <div class='logo'> 
                <svg xmlns="http://www.w3.org/2000/svg" 
                xmlns:xlink="http://www.w3.org/1999/xlink" 
                viewBox="200 50 600 550"> 
                    <use xlink:href='#logo' fill="none" ></use> 
                </svg> 
            </div> 
            <nav> 
 
            </nav> 
        </header> 
    <svg> 
        <path id='logo'  d='M 200 400 L 400 50 L 600 400 L 500 400 L 400 50 L 500 400 L 400 550 L 300 400 L 400 50 L 400 550 L 300 400 L 200 400'  stroke='blue'></path> 
    </svg> 
    </body> 
</html>

Как правило так поступают (не указывая fill ), когда хотят с помощью тега <use> многократно использовать (клонировать) один и тот же элемент svg.

И тогда при вызове каждого клона можно его либо не окрашивать совсем (как вы хотите), либо окрашивать в любой, например - красный цвет с помощью fill="red"

<!DOCTYPE html> 
<html> 
    <head> 
    </head> 
    <body> 
        <header> 
            <div class='logo'> 
                <svg xmlns="http://www.w3.org/2000/svg" 
                xmlns:xlink="http://www.w3.org/1999/xlink" 
                viewBox="200 50 600 550"> 
                   <g transform="translate(60,30) scale(0.7)"> 
					<use xlink:href='#logo' fill="none" ></use> 
				   </g>	   
					   <g transform="translate(260,40) scale(0.5)"> 
						<use xlink:href='#logo' fill="yellowgreen" ></use> 
					   </g>	    
			     <g transform="translate(460,50) scale(0.25)"> 
						<use xlink:href='#logo' fill="gold" ></use> 
				 </g>	  		    
                </svg> 
            </div> 
            <nav> 
 
            </nav> 
        </header> 
    <svg> 
        <path id='logo'  d='M 200 400 L 400 50 L 600 400 L 500 400 L 400 50 L 500 400 L 400 550 L 300 400 L 400 50 L 400 550 L 300 400 L 200 400'  stroke='blue'></path> 
    </svg> 
    </body> 
</html>

Answer 2

Для того, чтобы визуально убрать фон заливки, можно его сделать полностью прозрачным, добавив fill-opacity='0'

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <header>
            <div class='logo'>
                <svg xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink"
                viewBox="200 50 600 550">
                    <use xlink:href='#logo'></use>
                </svg>
            </div>
            <nav>
            </nav>
        </header>
    <svg>
        <path id='logo' d='M 200 400 L 400 50 L 600 400 L 500 400 L 400 50 L 500 400 L 400 550 L 300 400 
                           L 400 50 L 400 550 L 300 400 L 200 400 ' 
                           stroke='blue'
                           fill-opacity='0'
                           ></path>
    </svg>
    </body>
</html>