2

Не могу изменить цвет картинки через свойство fill, сама svg картинка есть но не изменяется ее цвет(

svg style="display: none;">
    <symbol id='pluses_pen'>
        <g>
            <path d="M47.668 19.717L33.402 33.985.534 48.463l14.477-32.872L29.279 1.327a1.589 
            1.589 0 1 1 2.248 2.249L17.683 17.422 9.107 36.888l2.999 2.999 19.467-8.573L45.42 
            17.47a1.587 1.587 0 0 1 2.248 0c.621.62.621 1.63 0 2.247zm-20.173 6.5l13.332-13.332a1.585 
            1.585 0 0 1 2.25 0c.623.62.623 1.625 0 2.249L29.745 28.466a1.594 1.594 0 0 1-2.25 0 1.593 
            1.593 0 0 1 0-2.25zm-3.48-3.482L37.348 9.403a1.59 1.59 0 1 1 2.25 2.25L26.265 24.985a1.592 
            1.592 0 0 1-2.25-2.25zm-3.48-3.482l13.332-13.33a1.586 1.586 0 0 1 2.25 0c.622.62.622 1.625 
            0 2.25l-13.333 13.33c-.31.31-.719.465-1.125.465s-.814-.154-1.125-.466a1.591 1.591 0 0 
            1 0-2.249z"/><path fill="#555" d="M47.668 19.717L33.402 33.985.534 48.463l14.477-32.872L29.279 
            1.327a1.589 1.589 0 1 1 2.248 2.249L17.683 17.422 9.107 36.888l2.999 2.999 19.467-8.573L45.42 17.47a1.587 1.587 
            0 0 1 2.248 0c.621.62.621 1.63 0 2.247zm-20.173 6.5l13.332-13.332a1.585 1.585 0 0 1 2.25 0c.623.62.623 1.625 
            0 2.249L29.745 28.466a1.594 1.594 0 0 1-2.25 0 1.593 1.593 0 0 1 0-2.25zm-3.48-3.482L37.348 9.403a1.59 1.59 0 1 1 
            2.25 2.25L26.265 24.985a1.592 1.592 0 0 1-2.25-2.25zm-3.48-3.482l13.332-13.33a1.586 1.586 0 0 1 2.25 0c.622.62.622 
            1.625 0 2.25l-13.333 13.33c-.31.31-.719.465-1.125.465s-.814-.154-1.125-.466a1.591 1.591 0 0 1 0-2.249z"/>
        </g>
    </symbol>

    <symbol id='pluses_book'>
        <g><path d="M43.287 11.666L21.851 23.227.414 11.666 21.85.106zm-3.985 5.882l3.985 
            2.149-21.436 11.556L.414 19.697l3.985-2.15 17.452 9.41zm0 8.025l3.985 2.148-21.436 11.562L.414 27.721l3.985-2.148 17.452 9.412z"/><path fill="#c7b299" d="M43.287 11.666L21.851 23.227.414 11.666 21.85.106zm-3.985 5.882l3.985 2.149-21.436 11.556L.414 19.697l3.985-2.15 17.452 9.41zm0 8.025l3.985 2.148-21.436 11.562L.414 27.721l3.985-2.148 17.452 9.412z"/></g>
    </symbol>

    <symbol id='settings'>
        <g><path d="M41.322 25.71c-1.44.513-2.837 1.762-3.243 2.743-.406.98-.298 2.85.357 
            4.23.656 1.379.259 3.427-.886 4.572-1.146 1.147-3.194 1.544-4.573.887-1.38-.656-3.252-.764-4.233-.356-.98.41-2.227 
            1.808-2.739 3.246-.512 1.436-2.241 2.601-3.861 2.601s-3.35-1.165-3.862-2.6c-.512-1.439-1.759-2.837-2.74-3.244-.982-.408-2.852-.303-4.232.353-1.38.657-3.427.26-4.573-.887-1.145-1.145-1.542-3.193-.886-4.572s.763-3.249.355-4.23c-.408-.979-1.8-2.23-3.24-2.742C1.526 25.199.36 23.47.36 21.85c0-1.62 1.166-3.35 2.606-3.857 1.44-.51 2.83-1.761 3.238-2.743.407-.984.303-2.853-.353-4.233-.656-1.38-.26-3.426.886-4.574 1.146-1.146 3.195-1.541 4.573-.885 1.38.656 3.25.764 4.231.357.981-.406 2.23-1.803 2.741-3.242.512-1.439 2.241-2.606 3.862-2.606 1.62 0 3.35 1.167 3.861 2.606.512 1.44 1.76 2.837 2.74 3.242.982.407 2.852.3 4.232-.357 1.38-.656 3.427-.261 4.573.885 1.145 1.148 1.542 3.195.886 4.574-.655 1.379-.76 3.252-.355 4.234.406.984 1.8 2.232 3.24 2.742 1.44.508 2.606 2.237 2.606 3.857s-1.166 3.349-2.605 3.86zM30.128 21.86c0-4.419-3.574-7.994-7.984-7.994a7.988 7.988 0 0 0-7.994 7.994 7.984 7.984 0 0 0 7.994 7.983 7.981 7.981 0 0 0 7.984-7.983z"/><path fill="#555" d="M41.322 25.71c-1.44.513-2.837 1.762-3.243 2.743-.406.98-.298 2.85.357 4.23.656 1.379.259 3.427-.886 4.572-1.146 1.147-3.194 1.544-4.573.887-1.38-.656-3.252-.764-4.233-.356-.98.41-2.227 1.808-2.739 3.246-.512 1.436-2.241 2.601-3.861 2.601s-3.35-1.165-3.862-2.6c-.512-1.439-1.759-2.837-2.74-3.244-.982-.408-2.852-.303-4.232.353-1.38.657-3.427.26-4.573-.887-1.145-1.145-1.542-3.193-.886-4.572s.763-3.249.355-4.23c-.408-.979-1.8-2.23-3.24-2.742C1.526 25.199.36 23.47.36 21.85c0-1.62 1.166-3.35 2.606-3.857 1.44-.51 2.83-1.761 3.238-2.743.407-.984.303-2.853-.353-4.233-.656-1.38-.26-3.426.886-4.574 1.146-1.146 3.195-1.541 4.573-.885 1.38.656 3.25.764 4.231.357.981-.406 2.23-1.803 2.741-3.242.512-1.439 2.241-2.606 3.862-2.606 1.62 0 3.35 1.167 3.861 2.606.512 1.44 1.76 2.837 2.74 3.242.982.407 2.852.3 4.232-.357 1.38-.656 3.427-.261 4.573.885 1.145 1.148 1.542 3.195.886 4.574-.655 1.379-.76 3.252-.355 4.234.406.984 1.8 2.232 3.24 2.742 1.44.508 2.606 2.237 2.606 3.857s-1.166 3.349-2.605 3.86zM30.128 21.86c0-4.419-3.574-7.994-7.984-7.994a7.988 7.988 0 0 0-7.994 7.994 7.984 7.984 0 0 0 7.994 7.983 7.981 7.981 0 0 0 7.984-7.983z"/></g>
    </symbol>

    <symbol id='backpack'>
        <g><path d="M.738 30.147V7.983c0-1.364 1.105-2.482 
            2.458-2.48h10.816V4.057c0-.995.382-1.923 1.082-2.628A3.64 
            3.64 0 0 1 17.7.335h6.29c2.029 0 3.684 1.667 3.684 3.723V5.5H38.49c1.35 
            0 2.458 1.118 2.458 2.482v1.654H14.742c-2.267 0-4.74 1.55-5.742 3.608zM16.47 5.502h8.747V4.058c0-.688-.55-1.243-1.228-1.243h-6.29c-.327 0-.636.13-.867.368a1.25 1.25 0 0 0-.362.875zm25.451 28.26c-.595 1.222-2.192 2.222-3.543 2.222H3.08c-1.35 0-1.968-1.002-1.369-2.221l9.492-19.422c.593-1.223 2.189-2.226 3.539-2.226H50.04c1.354 0 1.969 1.003 1.371 2.226z"/><path fill="#555" d="M.738 30.147V7.983c0-1.364 1.105-2.482 2.458-2.48h10.816V4.057c0-.995.382-1.923 1.082-2.628A3.64 3.64 0 0 1 17.7.335h6.29c2.029 0 3.684 1.667 3.684 3.723V5.5H38.49c1.35 0 2.458 1.118 2.458 2.482v1.654H14.742c-2.267 0-4.74 1.55-5.742 3.608zM16.47 5.502h8.747V4.058c0-.688-.55-1.243-1.228-1.243h-6.29c-.327 0-.636.13-.867.368a1.25 1.25 0 0 0-.362.875zm25.451 28.26c-.595 1.222-2.192 2.222-3.543 2.222H3.08c-1.35 0-1.968-1.002-1.369-2.221l9.492-19.422c.593-1.223 2.189-2.226 3.539-2.226H50.04c1.354 0 1.969 1.003 1.371 2.226z"/></g>
    </symbol>
</svg>

Использование:

<div class="item__card">
    <svg class="pluses_svg1">
        <use xlink:href="#pluses_pen"></use>
    </svg>
    <h2 class="pluses_about">Web & App Design</h2>
    <p>Nam liber tempor cum soluta nobis eleifend option congue nihil 
    imperdiet doming id quod mazim.</p>
    <div class="border_pluses"></div>
</div>

css:

.pluses_svg1 {
    fill: white;
}

2 ответа 2

3

Проблема шире, чем этот частный случай.

Дело в том, что когда иконки вызываются командой <USE> svg попадает в так называемый Shadow DOM. И внешней таблицей стилей невозможно переопределить цвет заливки и строки. В вашей иконке уже был определен цвет заливки fill="#555"

Поэтому попытка в лоб перекрасить иконку не работает.

Но есть способ обойти это. Нужно заставить path иконки унаследовать цвет из таблицы стилей:

 #pluses_pen  {
     stroke:dodgerblue;
     fill:dodgerblue;     
    }  
    symbol  path {
    stroke:inherit;
    fill:inherit;
    }

   <svg >
        <symbol id='pluses_pen'>
            <g>
                <path d="M47.668 19.717L33.402 33.985.534 48.463l14.477-32.872L29.279 1.327a1.589 
                1.589 0 1 1 2.248 2.249L17.683 17.422 9.107 36.888l2.999 2.999 19.467-8.573L45.42 
                17.47a1.587 1.587 0 0 1 2.248 0c.621.62.621 1.63 0 2.247zm-20.173 6.5l13.332-13.332a1.585 
                1.585 0 0 1 2.25 0c.623.62.623 1.625 0 2.249L29.745 28.466a1.594 1.594 0 0 1-2.25 0 1.593 
                1.593 0 0 1 0-2.25zm-3.48-3.482L37.348 9.403a1.59 1.59 0 1 1 2.25 2.25L26.265 24.985a1.592 
                1.592 0 0 1-2.25-2.25zm-3.48-3.482l13.332-13.33a1.586 1.586 0 0 1 2.25 0c.622.62.622 1.625 
                0 2.25l-13.333 13.33c-.31.31-.719.465-1.125.465s-.814-.154-1.125-.466a1.591 1.591 0 0 
                1 0-2.249z"/><path fill="#555" d="M47.668 19.717L33.402 33.985.534 48.463l14.477-32.872L29.279 
                1.327a1.589 1.589 0 1 1 2.248 2.249L17.683 17.422 9.107 36.888l2.999 2.999 19.467-8.573L45.42 17.47a1.587 1.587 
                0 0 1 2.248 0c.621.62.621 1.63 0 2.247zm-20.173 6.5l13.332-13.332a1.585 1.585 0 0 1 2.25 0c.623.62.623 1.625 
                0 2.249L29.745 28.466a1.594 1.594 0 0 1-2.25 0 1.593 1.593 0 0 1 0-2.25zm-3.48-3.482L37.348 9.403a1.59 1.59 0 1 1 
                2.25 2.25L26.265 24.985a1.592 1.592 0 0 1-2.25-2.25zm-3.48-3.482l13.332-13.33a1.586 1.586 0 0 1 2.25 0c.622.62.622 
                1.625 0 2.25l-13.333 13.33c-.31.31-.719.465-1.125.465s-.814-.154-1.125-.466a1.591 1.591 0 0 1 0-2.249z"/>
            </g>
        </symbol>

        <symbol id='pluses_book'>
            <g><path d="M43.287 11.666L21.851 23.227.414 11.666 21.85.106zm-3.985 5.882l3.985 
                2.149-21.436 11.556L.414 19.697l3.985-2.15 17.452 9.41zm0 8.025l3.985 2.148-21.436 11.562L.414 27.721l3.985-2.148 17.452 9.412z"/><path fill="#c7b299" d="M43.287 11.666L21.851 23.227.414 11.666 21.85.106zm-3.985 5.882l3.985 2.149-21.436 11.556L.414 19.697l3.985-2.15 17.452 9.41zm0 8.025l3.985 2.148-21.436 11.562L.414 27.721l3.985-2.148 17.452 9.412z"/></g>
        </symbol>

        <symbol id='settings'>
            <g><path d="M41.322 25.71c-1.44.513-2.837 1.762-3.243 2.743-.406.98-.298 2.85.357 
                4.23.656 1.379.259 3.427-.886 4.572-1.146 1.147-3.194 1.544-4.573.887-1.38-.656-3.252-.764-4.233-.356-.98.41-2.227 
                1.808-2.739 3.246-.512 1.436-2.241 2.601-3.861 2.601s-3.35-1.165-3.862-2.6c-.512-1.439-1.759-2.837-2.74-3.244-.982-.408-2.852-.303-4.232.353-1.38.657-3.427.26-4.573-.887-1.145-1.145-1.542-3.193-.886-4.572s.763-3.249.355-4.23c-.408-.979-1.8-2.23-3.24-2.742C1.526 25.199.36 23.47.36 21.85c0-1.62 1.166-3.35 2.606-3.857 1.44-.51 2.83-1.761 3.238-2.743.407-.984.303-2.853-.353-4.233-.656-1.38-.26-3.426.886-4.574 1.146-1.146 3.195-1.541 4.573-.885 1.38.656 3.25.764 4.231.357.981-.406 2.23-1.803 2.741-3.242.512-1.439 2.241-2.606 3.862-2.606 1.62 0 3.35 1.167 3.861 2.606.512 1.44 1.76 2.837 2.74 3.242.982.407 2.852.3 4.232-.357 1.38-.656 3.427-.261 4.573.885 1.145 1.148 1.542 3.195.886 4.574-.655 1.379-.76 3.252-.355 4.234.406.984 1.8 2.232 3.24 2.742 1.44.508 2.606 2.237 2.606 3.857s-1.166 3.349-2.605 3.86zM30.128 21.86c0-4.419-3.574-7.994-7.984-7.994a7.988 7.988 0 0 0-7.994 7.994 7.984 7.984 0 0 0 7.994 7.983 7.981 7.981 0 0 0 7.984-7.983z"/><path fill="#555" d="M41.322 25.71c-1.44.513-2.837 1.762-3.243 2.743-.406.98-.298 2.85.357 4.23.656 1.379.259 3.427-.886 4.572-1.146 1.147-3.194 1.544-4.573.887-1.38-.656-3.252-.764-4.233-.356-.98.41-2.227 1.808-2.739 3.246-.512 1.436-2.241 2.601-3.861 2.601s-3.35-1.165-3.862-2.6c-.512-1.439-1.759-2.837-2.74-3.244-.982-.408-2.852-.303-4.232.353-1.38.657-3.427.26-4.573-.887-1.145-1.145-1.542-3.193-.886-4.572s.763-3.249.355-4.23c-.408-.979-1.8-2.23-3.24-2.742C1.526 25.199.36 23.47.36 21.85c0-1.62 1.166-3.35 2.606-3.857 1.44-.51 2.83-1.761 3.238-2.743.407-.984.303-2.853-.353-4.233-.656-1.38-.26-3.426.886-4.574 1.146-1.146 3.195-1.541 4.573-.885 1.38.656 3.25.764 4.231.357.981-.406 2.23-1.803 2.741-3.242.512-1.439 2.241-2.606 3.862-2.606 1.62 0 3.35 1.167 3.861 2.606.512 1.44 1.76 2.837 2.74 3.242.982.407 2.852.3 4.232-.357 1.38-.656 3.427-.261 4.573.885 1.145 1.148 1.542 3.195.886 4.574-.655 1.379-.76 3.252-.355 4.234.406.984 1.8 2.232 3.24 2.742 1.44.508 2.606 2.237 2.606 3.857s-1.166 3.349-2.605 3.86zM30.128 21.86c0-4.419-3.574-7.994-7.984-7.994a7.988 7.988 0 0 0-7.994 7.994 7.984 7.984 0 0 0 7.994 7.983 7.981 7.981 0 0 0 7.984-7.983z"/></g>
        </symbol>

        <symbol id='backpack'>
            <g><path d="M.738 30.147V7.983c0-1.364 1.105-2.482 
                2.458-2.48h10.816V4.057c0-.995.382-1.923 1.082-2.628A3.64 
                3.64 0 0 1 17.7.335h6.29c2.029 0 3.684 1.667 3.684 3.723V5.5H38.49c1.35 
                0 2.458 1.118 2.458 2.482v1.654H14.742c-2.267 0-4.74 1.55-5.742 3.608zM16.47 5.502h8.747V4.058c0-.688-.55-1.243-1.228-1.243h-6.29c-.327 0-.636.13-.867.368a1.25 1.25 0 0 0-.362.875zm25.451 28.26c-.595 1.222-2.192 2.222-3.543 2.222H3.08c-1.35 0-1.968-1.002-1.369-2.221l9.492-19.422c.593-1.223 2.189-2.226 3.539-2.226H50.04c1.354 0 1.969 1.003 1.371 2.226z"/><path fill="#555" d="M.738 30.147V7.983c0-1.364 1.105-2.482 2.458-2.48h10.816V4.057c0-.995.382-1.923 1.082-2.628A3.64 3.64 0 0 1 17.7.335h6.29c2.029 0 3.684 1.667 3.684 3.723V5.5H38.49c1.35 0 2.458 1.118 2.458 2.482v1.654H14.742c-2.267 0-4.74 1.55-5.742 3.608zM16.47 5.502h8.747V4.058c0-.688-.55-1.243-1.228-1.243h-6.29c-.327 0-.636.13-.867.368a1.25 1.25 0 0 0-.362.875zm25.451 28.26c-.595 1.222-2.192 2.222-3.543 2.222H3.08c-1.35 0-1.968-1.002-1.369-2.221l9.492-19.422c.593-1.223 2.189-2.226 3.539-2.226H50.04c1.354 0 1.969 1.003 1.371 2.226z"/></g>
        </symbol>
    </svg>
    
 <style>

    #pluses_pen  {
     stroke:dodgerblue;
     fill:dodgerblue;	  
    }   
        
	symbol  path {
	stroke:inherit;
	fill:inherit;
	}
	  
</style>

    <div class="item__card">
        <svg class="pluses_svg1">
            <use xlink:href="#pluses_pen" ></use>
        </svg>
        <h2 class="pluses_about">Web & App Design</h2>
        <p>Nam liber tempor cum soluta nobis eleifend option congue nihil 
        imperdiet doming id quod mazim.</p>
        <div class="border_pluses"></div>
    </div>


 

1
  • Я смог изменить при обращении к path через #pluses_pen, но при hover он не изменяет ничего, попробую так, спасибо
    – Trest
    25 фев 2020 в 7:26
1

У вас в symbol два элемента path, один из которых:

<path fill="#555" d="M47.668 19.717L33.402 33.985.534 48.463l14.477-32.872L29.279
        1.327a1.589 1.589 0 1 1 2.248 2.249L17.683 17.422 9.107 36.888l2.999 2.999 19.467-8.573L45.42 17.47a1.587 1.587
        0 0 1 2.248 0c.621.62.621 1.63 0 2.247zm-20.173 6.5l13.332-13.332a1.585 1.585 0 0 1 2.25 0c.623.62.623 1.625
        0 2.249L29.745 28.466a1.594 1.594 0 0 1-2.25 0 1.593 1.593 0 0 1 0-2.25zm-3.48-3.482L37.348 9.403a1.59 1.59 0 1 1
        2.25 2.25L26.265 24.985a1.592 1.592 0 0 1-2.25-2.25zm-3.48-3.482l13.332-13.33a1.586 1.586 0 0 1 2.25 0c.622.62.622
        1.625 0 2.25l-13.333 13.33c-.31.31-.719.465-1.125.465s-.814-.154-1.125-.466a1.591 1.591 0 0 1 0-2.249z"/>

удалите этот кусок и все заработает

<symbol id='pluses_pen'>
    <g>
        <path d="M47.668 19.717L33.402 33.985.534 48.463l14.477-32.872L29.279 1.327a1.589
        1.589 0 1 1 2.248 2.249L17.683 17.422 9.107 36.888l2.999 2.999 19.467-8.573L45.42
        17.47a1.587 1.587 0 0 1 2.248 0c.621.62.621 1.63 0 2.247zm-20.173 6.5l13.332-13.332a1.585
        1.585 0 0 1 2.25 0c.623.62.623 1.625 0 2.249L29.745 28.466a1.594 1.594 0 0 1-2.25 0 1.593
        1.593 0 0 1 0-2.25zm-3.48-3.482L37.348 9.403a1.59 1.59 0 1 1 2.25 2.25L26.265 24.985a1.592
        1.592 0 0 1-2.25-2.25zm-3.48-3.482l13.332-13.33a1.586 1.586 0 0 1 2.25 0c.622.62.622 1.625
        0 2.25l-13.333 13.33c-.31.31-.719.465-1.125.465s-.814-.154-1.125-.466a1.591 1.591 0 0
        1 0-2.249z"/>
    </g>
</symbol>
1
  • Спасибо большое
    – Trest
    24 фев 2020 в 18:28

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.