Подключаю SVG через object, размер могу поменять, а вот толщина обводки и цвет - ни в какую. Что я делаю не так?
index.html:<html>
<head><link rel="stylesheet" href="style.css"></head>
<body>
<object type="image/svg+xml" data="sample-icon.svg" class="small">
Small Sample
</object>
<object type="image/svg+xml" data="sample-icon.svg" class="big">
Big Sample
</object>
</body>
</html>
style.css:.small {
stroke: yellow;
}
.big {
stroke: red;
stroke-width: 4;
width: 48;
height: 48;
}
sample-icon.svg:<?xml-stylesheet type="text/css" href="style.css"?>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="23" height="23" rx="7.5" stroke="#CCCF41"/>
<rect x="6.5" y="6.5" width="11" height="11" rx="0.5" stroke="#CCCF41"/>
<rect x="10.5" y="10.5" width="3" height="3" rx="0.5" stroke="#CCCF41"/>
</svg>
Результат:
Пробовал задавать цвет обводки и через хексы, результат такой же. Толщина тоже не регулируется.