Я пытаюсь манипулировать внешним .svg файлом через CSS.
HTML
<body>
<div class="mysvg">
<img src="decho.svg" alt="decho" width="200px"></img>
</div>
</body>
CSS
div.mysvg img {
opacity: .3;
transition: opacity 1s linear 0s;
}
div.mysvg img:hover {
opacity: 1;
}
Этот код работает для непрозрачности, но не для fill или других специальных атрибутов svg, таких как stroke. Я знаю, что не могу сделать это с тегом img, но я искал часы, и я не могу найти правильный способ сделать это с помощью svg или object.
В основном, мои вопросы: как достичь того же результата, что и код, который я связал, но иметь возможность манипулировать свойствами заливки, обводки и т.д., и он должен быть внешним файлом, а не только встроенный код svg, вставленный в html.
Если кто-то сможет показать мне правильный способ сделать это, я буду очень благодарен. Спасибо.
EDIT:
Мне удалось это сделать, добавив css внутри самого файла .svg. Он должен быть сразу после тега svg.
<svg ...>
<style type="text/css" media="screen">
<![CDATA[
g {
fill: yellow;
stroke: black;
stroke-width: 1;
transition: fill 1s linear 0s;
}
g:hover {
fill: blue;
}
]]>
</style>
<g>
<path ...>
</g>
</svg>
Вам также нужно вставить его в качестве object в html, иначе он не будет работать.
<object data="decho.svg" type="image/svg+xml">
Надеюсь, это поможет кому-то искать ответ, подобный моему в будущем. Это помогло мне http://www.hongkiat.com/blog/scalable-vector-graphic-css-styling/.
