Не изменяется правилами CSS окраска иконки, вызванной командой
Не могу изменить цвет картинки через свойство 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 шт):
Автор решения: Енисей
→ Ссылка
У вас в 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>
Автор решения: Alexandr_TT
→ Ссылка
Проблема шире, чем этот частный случай.
Дело в том, что когда иконки вызываются командой <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>