Как правильно применять цвета для svg?

Question

[kot98]

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <circle cx="12" cy="12" r="10.5" stroke="#0F0F0F" color="transparent"/>
    <path d="M16.4908 7.09532L16.6064 6.5H16H12.1911H11.5853H9.73436H9.72751H9.32121H9.31435L9.23647 6.90575L7.50896 15.9055L7.3949 16.4998H7.40175H8H8.00686H9.83719H10.2501H11.6861C12.2252 16.5041 12.7479 16.4415 13.253 16.3108L13.253 16.3108L13.2558 16.31C13.7676 16.1743 14.2362 15.9733 14.6579 15.7043L14.6579 15.7044L14.6612 15.7022C15.0926 15.4223 15.4475 15.07 15.7202 14.6464C16.0067 14.2085 16.1712 13.7069 16.2236 13.1542L16.2236 13.1542L16.224 13.1495C16.2819 12.4701 16.1524 11.8532 15.7938 11.3385C15.4553 10.8485 14.9874 10.4863 14.4104 10.2474C13.8475 10.0101 13.2315 9.8885 12.5689 9.87503L12.5689 9.87495L12.5601 9.87492L11.5396 9.87211L11.7388 8.84132H15.7395H16.1517L16.2303 8.43664L16.4908 7.09532ZM10.7099 14.1669L11.0887 12.2065L12.4995 12.21C12.7465 12.221 12.9368 12.2704 13.0834 12.3433L13.0834 12.3433L13.0901 12.3465C13.2242 12.4107 13.2992 12.4899 13.345 12.5819L13.345 12.582L13.3491 12.59C13.3939 12.676 13.424 12.8092 13.3939 13.0221C13.3565 13.2684 13.2657 13.4616 13.1285 13.6183L13.1278 13.6192C12.9818 13.7867 12.794 13.9222 12.5539 14.0228C12.3128 14.1198 12.0467 14.1707 11.7507 14.1708C11.7504 14.1708 11.7501 14.1708 11.7498 14.1708L10.7099 14.1669Z" stroke="#0F0F0F" color="white"/>
</svg>

есть такая свг - круг и внутри буква "Б". как правильно задать все цвета и заливки внутри свг, чтобы потом можно было отдельно задавать цвета при помощи стилей для заливки круга и отдельно для самой буквы?

Answer 1

[Максим]

в svg не color а fill и это касается всех элементов в теле тега svg
fill: transparent
fill: red;
fill: ...

fill - это как background
но закрашивает только нарисованную область
stroke - это border и у него два свойства
stroke: здесь цвет границы
stroke-width: здесь толщина границы
но есть и другие свойства
Вот примерно то что я написал выше: https://codepen.io/topicstarter/pen/QWVorJp

Comments

[kot98]

Максим, проблема в том, чтобы потом отдельно нужно задать цвет как кругу, так и букве внутри
Получается, чтобы сделать букву белой, а круг красным. в самом файле свг - задаю svg-fill:none; circle-fill:none, path: fill-white. а потом на svg вешаю класс, которому указываю fill:red?

[Максим]

kot98, я песочницу показал - посмотрите - если не получится напишите мне на почту - там это удобнее [e-mail]

Answer 2

[Вадим]