Как подсветить часть SVG при помощи CSS?

Question

[Кирилл Яшин]

Привет
Есть html страница в которую вставлена "картинка.svg". Сама картинка состоит из сотни практически одинаковых элементов (у каждого свой текст). Для примера, вот как выглядит один из элементов:

<rect class="fil0 strff" x="1810.53" y="9305.27" width="240" height="480" rx="20" ry="21.79"/>
<g transform="matrix(2.64845E-14 -1 1 2.64845E-14 -4702.59 16813.2)">
<text x="7100" y="6700"  class="R31 fnt0">R31</text></g>

Изначально нарисовал всё это безобразие в CorelDraw и сохранил в .svg с внешним стилем (соответственно, код svg вставил в свой html, стили в свой css). Ок, работает. В свой css пишу такое:

.R31 {
fill:black
}
.R31:hover {
fill: red
}

Ладненько, при наведении на этот элемент, он меняет заливку с черного на красный
Пишу дальше:
HTML

<div class:"tap_R31">Нажмите чтобы подсветить элемент R31</div>

CSS

.R31 {
fill:black
}
.tap_R31:hover ~ .R31 {
fill:yellow
}

И ничего не происходит...
Задача в том, чтобы при наведении на элемент из списка, он менял свою заливку. Можно и через чекбоксы, что даже лучше. Самое важное, сделать это без использования скриптов. На сервере где всё это лежит скрипты запрещены (а использовать нужно именного этот сервер и никакой другой)
Опыта как Вы, наверное, догадались, у меня не много. Подозреваю, что нельзя просто взять и "скрестить" стили html и svg

Если этот вопрос для Вас очень легкий и/или нет желания на него порядочно ответить. Скажите хотя бы, как называется то, что меня интересует. Буду гуглить и разбираться самостоятельно, но сейчас, я даже не представляю, как вбить запрос

Comments

[zoozag]

Залейте в песочиницу

Answer 1

[Moskus]

Во-первых, действительно, публикуйте код в песочнице типа jsfiddle.
Во-вторых, вы документацию на CSS-селекторы читали? Селектор ~ называется sibling, что означает, что это должны быть элементы одного уровня (потомки одного уровня одного и того же родителя).
В-третьих, когда пытаетесь использовать что-то новое, начинайте с простого, чтобы не гадать, что же именно не работает.
Если вы попробуете тупо вот это:

<div class="tap_R31">Нажмите чтобы подсветить элемент R31</div>
<ul>
<li>1</li>
<li>2</li>
</ul>

и вот такой CSS:

.tap_R31:hover ~ li {
background-color:yellow
}

Оно у вас точно также не сработает. Зато, сразу ясно, что дело, например, не в SVG.
Так вот, чтобы пример выше сработал, нужно писать .tap_R31:hover ~ ul li, тогда части селектора до ~ и после него будут начинаться с элементов одного уровня и все заработает.

Comments

[Кирилл Яшин]

Спасибо, добрый человек
Действительно, с уровнями я и запутался
Всё работает

Answer 2

[Gortyser]

Если все так, как у вас написано, а именно

Нажмите чтобы подсветить элемент R31

, то поменяйте class:"tap_R31" на class="tap_R31"

Comments

[Кирилл Яшин]

И в правду, опечатка
Но это, к сожалению, не помогло