Как сделать подсветку с помощью svg?

Question

[mihaevs]

Как сделать подсветку рядов при наведении с помощью svg?
Щас не очень получается,разобраться как правильно написать координатый для кривой Безье
должно быть как на рисунке

webj.esy.es/amfiteatr2.html

<svg class="bg-row-line bg-row1" style="top: 180px; left: -38px;" viewBox="0 0 1000 1000">
    <path class="bg-row-1" d="M-130,-405 C10,45 570,430 1070,230">
    </path>
    <path d="M-130,-305 C10,45 470,430 970,130" class="bg-row-2">
    </path>
</svg>
<svg class="bg-row-line bg-row2" style="top: 95px; left: 0;" viewBox="0 0 1000 1000">
    <path class='bg-row-1' d="M-45,-90 C1,30 500,450 1000,230">
    </path>
    <path class='bg-row-2' d="M-45,-90 C1,30 500,450 1000,230">
    </path>
</svg>
<svg class="bg-row-line bg-row3" style="top: 112px; left: -16px;" viewBox="0 0 1000 1000">
    <path class="bg-row-1" d="M-18,-90 C1,60 600,490 1170,195" >
    </path>
    <path class="bg-row-2" d="M-18,-90 C10,60 600,490 1170,195">
    </path>
</svg>

<svg class="bg-row-line bg-row4" style="top: 142px; left: -20px;" viewBox="0 0 1000 1000">
    <path class="bg-row-1" d="M-28,-90 C1,60 650,500 1240,155">
    </path>
    <path class="bg-row-2" d="M-28,-90 C1,60 650,500 1240,155">
    </path>
</svg>

<svg class="bg-long-line bg-row5" style="left: 130px; top: 40px;" viewBox="0 0 1000 100">
    <path  class="bg-lrow-1" d="M-45,-60 C1,95 500,305 810,100">
    </path>
    <path  class="bg-lrow-2" d="M-45,-60 C1,95 500,305 810,100" >
    </path>
</svg>
<svg class="bg-long-line bg-row6" style="left: 106px; top: 61px;" viewBox="0 0 1000 100">
    <path class="bg-lrow-1" d="M-40,-90 C1,85 520,330 875,80">
    </path>
    <path class="bg-lrow-2" d="M-40,-90 C1,85 520,330 875,80">
    </path>
</svg>
<svg class="bg-long-line bg-row7" style="left: 87px; top: 85px;" viewBox="0 0 1000 100">
    <path class="bg-lrow-1" d="M-25,-90 C1,40 500,370 960,35" >
    </path>
    <path class="bg-lrow-2" d="M-25,-90 C1,40 500,370 960,35" >
    </path>
</svg>

Answer 1

[Александр Маджугин]

Ну а как вы обычно делаете подсветку при наведении? Через :hover разумеется. Например у меня так:

path {
    fill:#3e3e3e;
    stroke:#3e3e3e;
    fill-opacity:0;
    stroke-opacity:0.6;
	stroke-width: 3;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
    z-index: 8;
}
path:hover {
    fill-opacity:0.1;
	stroke-opacity:1;
	stroke-width: 4;
}

Ну в вашем случае селекторам надо будет добавить классы...

Comments

[mihaevs]

ну это понятно что через :hover, мне надо при наведении вывести подсветку всего ряда через svg, только я непонимаю как она строится(кривая Безье в данном случае)

[Александр Маджугин]

О... видимо я не до конца вдумался в смысл. Просто на картинке выделено место.
А если обернуть каждый ряд в отдельный и повесить hover на него? Ну то-есть изменить структуру svg так, чтобы у всех мест одного ряда был общий родитель.