Задать вопрос
Nekto_Habr
@Nekto_Habr
Чат дизайнеров: https://t.me/figma_life
html

Почему не меняется цвет и толщина обводки у SVG через object и css?

Подключаю 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>


Результат:
5c89209dcf53c231884168.png

Пробовал задавать цвет обводки и через хексы, результат такой же. Толщина тоже не регулируется.
  • Вопрос задан
  • 2087 просмотров
2 комментария
Подписаться 1 Простой 2 комментария
Пригласить эксперта
Ответы на вопрос 5
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Подключайте через use css.yoksel.ru/svg-groups-use

Либо фильтрами https://blog.union.io/code/2017/08/10/img-svg-fill/
Ответ написан
20 комментариев
20 комментариев
Adamos
@Adamos
Чтобы к элементам SVG применялись стили и прочие DOM-манипуляции, SVG должен быть включен в DOM.
Это делается либо непосредственно выводом его в код страницы, либо вставкой внешнего файла, но не через теги img / object, а через JS-библиотеку типа такой: keith-wood.name/svg.html
Ответ написан
Комментировать
Комментировать
Moskus
@Moskus
Хак вам уже посоветовали, а я добавлю, что даже если бы CSS мог влиять на содержимое object, ваш код не работал бы в любом случае. Вы ведь пытаетесь изменить свойства object.big и object.small, что возможно только относительно их размера. А для изменения свойств фигур, селектор должен был бы выглядеть как .small svg * или . small rect, например. Потому что свойства в SVG, один чёрт, не наследуются.
Ответ написан
Комментировать
Комментировать
warsand
@warsand
Экспериментатор
Пропишем квадрату id="xxx"
<rect id="tut" x="0.5" y="0.5" width="24" height="24" rx="8" />
<rect id="tam" x="6.5" y="6.5" width="12" height="12" rx="0.5" />

Зададим стили ч-з этот id: xxx;
#tut {
stroke: red;
stroke-width: 4;
width: 24;
height: 24;
}
#tam {
stroke: #0cc;
stroke-width: 2;
width: 12;
height: 12;
}
- И оно должно сработать...
Ответ написан
10 комментариев
10 комментариев
@tyzberd
вот норм расписано. dreamhelg.ru/2017/02/symbol-svg-sprite-detail-guide
я делаю в отдельном файле + это https://github.com/jonathantneal/svg4everybody
Ответ написан
2 комментария
2 комментария
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Сайт с вебзвонками и чатами на react
24 апр. 2024, в 17:33
10000 руб./за проект
Правки в webApp готового и написанного телеграмм бота next, tailwind
24 апр. 2024, в 17:26
6000 руб./за проект
Доработать сайт на React + Nest
19 апр. 2024, в 13:38
1500 руб./в час
Ещё заказы