Задать вопрос
@by_ultra
html

Как покрасить SVG рисунок?

Всем доброго вечера.
Есть рисунок SVG созданный при помощи Method Draw.
Возможно ли при наведении :hover менять несколько цветов и условий одновременно.
Спасибо.
<!doctype html>
<html>
<head>
	<meta charset="utf-8">

	<title>SVG</title>
	<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>	
<body>
	<div class="flag"></div>
	<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">
 <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
 <g>
  <title>background</title>
  <rect fill="none" id="canvas_background" height="602" width="802" y="-1" x="-1"/>
  <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
   <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
  </g>
 </g>
 <g>
  <title>Layer 1</title>
  <rect stroke="#000" id="svg_19" height="185" width="409.00002" y="61.45313" x="50.49998" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="#fff"/>
  <rect stroke="#000" id="svg_20" height="64" width="408.99998" y="120.45313" x="50.5" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="#fff"/>
  <rect id="svg_24" height="308" width="6" y="246.45313" x="51.5" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="none"/>
 </g>
</svg>
</div>
</body>	
</html>


CSS
#svg_24:hover{
    fill: brown;
    transition: 1s;
    transform: scale(1.2);
    stroke-width: 3px;
    }

#svg_20:hover{
    fill: red;
    transition: 1s;
    transform: scale(1.2);
    stroke-width: 3px;
    cursor:pointer;
    }

#svg_19:hover{
	transform: scale(1.2);
	stroke-width: 3px;
	cursor:pointer;
}
  • Вопрос задан
  • 120 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
RomanTRS
@RomanTRS
Менять стили нужно при наведении на сам рисунок, а не на отдельный его элемент.
Только используйте лучше классы, для внутренних элементов SVG, вместо ID.

Примерно так:
<svg id="icon_id">
    <rect class="style1" ... />
    <rect class="style2" ... />
</svg>

#icon_id:hover .style1 { fill: red; }
#icon_id:hover .style2 { fill: green; }
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
WordPress-разработчик
div. • Ставрополь
от 50 000 до 120 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Выложить 75 курсов на геткурс и настроить базовые функции
26 нояб. 2024, в 02:18
15000 руб./за проект
Редизайн и доработка интернет магазина на wordPress
25 нояб. 2024, в 23:42
50000 руб./за проект
Разработка мобильного приложения с дополненной реальностью (AR)
25 нояб. 2024, в 23:32
200000 руб./за проект
Ещё заказы