не работает hover в svg

162
18 февраля 2019, 17:00

Добрый день столкнулся с такой проблемой , что hover не работает полноценно в svg. Пытаюсь менять цвет при наведении на path или класс какой нибудь:

.st1:hover .st7 { 
    fill:grey; 
 
}
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
   viewBox="0 0 1924 1195" style="enable-background:new 0 0 1924 1195;" xml:space="preserve"> 
<style type="text/css"> 
  .st0{fill:none;} 
  .st1{fill:url(#img);stroke:#AC8D59;stroke-width:2;} 
  .st2{fill:url(#img1);stroke:#AC8D59;stroke-width:2;} 
  .st3{fill:#F4EFE3;stroke:#AC8D59;stroke-width:2;} 
  .st4{fill:#F4EFE3;stroke:#AC8D59;stroke-width:2;} 
  .st5{fill:url(#img2);stroke:#AC8D59;stroke-width:2;} 
  .st6{fill:url(#img3);stroke:#AC8D59;stroke-width:2;} 
  .st7{fill:#AC8D59;} 
  .st8{fill:#FFFFFF;} 
  .st9{font-family:'NautilusPompilius';} 
    .st10{font-size:25.4038px;} 
    . 
 
</style> 
 
 <pattern id="img"  width="100%" height="100%"> 
                            <image id= "img" x="0" y="0" width="600" height="390" xlink:href="http://glavnarzan.ru/wp-content/themes/white_narzan/assets/img/gallery/Narzan-fun-3.jpg"></image> 
                            </pattern> 
<pattern id="img1"  width="100%" height="100%"> 
                            <image id= "img" x="0" y="0" width="480" height="350" xlink:href="http://glavnarzan.ru/wp-content/themes/white_narzan/assets/img/spa_photo_two.png"></image> 
                            </pattern> 
<pattern id="img2"  width="100%" height="100%"> 
                            <image id= "img" x="0" y="0" width="470" height="340" xlink:href="http://glavnarzan.ru/wp-content/themes/white_narzan/assets/img/spa_photo_one.png"></image> 
                            </pattern> 
<pattern id="img3"  width="100%" height="100%"> 
                            <image id= "img" x="0" y="0" width="570" height="360" xlink:href="http://glavnarzan.ru/wp-content/themes/white_narzan/assets/img/gallery/Narzan-fun-1.jpg"></image> 
                            </pattern> 
 
<path class="st1 qw" d="M883.2,472.7L782.7,304.6l99.9-168.5l200.5-0.2L1183.6,304l-99.9,168.5L883.2,472.7z"  />                           
<path class="st2 qw" d="M1185.5,641.2L1085,473.1l99.9-168.5l200.5-0.2l100.6,168.1L1386,641L1185.5,641.2z"/> 
<path class="st3 qw" d="M1185.5,978L1085,809.9l99.9-168.5l200.5-0.2l100.6,168.1L1386,977.8L1185.5,978z"/> 
<path class="st4 qw" d="M883.2,1146.5L782.7,978.4l99.9-168.5l200.5-0.2l100.6,168.1l-99.9,168.5L883.2,1146.5z"/> 
<path class="st5 qw" d="M584.1,641.2L483.6,473.1l99.9-168.5l200.5-0.2l100.6,168.1L784.6,641L584.1,641.2z"/> 
<path class="st6 qw" d="M584.1,978L483.6,809.9l99.9-168.5l200.5-0.2l100.6,168.1l-99.9,168.5L584.1,978z"/> 
<path class="st3 qw" d="M883.2,809.6L782.7,641.5L882.6,473l200.5-0.2l100.6,168.1l-99.9,168.5L883.2,809.6z"/> 
<image style="overflow:visible;" x="100" y="50" width="250" height="187" xlink:href="http://wp/wp-content/themes/white_narzan/assets/img/logo_foot.png"  transform="matrix(0.6609 0 0 0.6609 1126.8506 708.8438)"> 
</image> 
<polygon class="st7" points="839.7,888.9 531.3,890.6 496.9,832.3 871,832.1 "/> 
<polygon class="st7" points="839.7,547 528.2,547.7 494.2,490.9 871,490.2 "/> 
<polygon class="st7" points="1138.9,378.2 830.5,379.9 792.8,321.6 1174.1,322.8 "/> 
<polygon class="st7" points="1441.2,547 1126.3,548.6 1091.9,490.3 1475.4,490.2 "/> 
<text transform="matrix(1 0 0 1 640.4487 868.3776)" class="st8 st9 st10 hq">Хамам</text> 
<text transform="matrix(1 0 0 1 640.4487 530.7667)" class="st8 st9 st10 hq">Массаж</text> 
<text transform="matrix(1 0 0 1 930.2485 356.9484)" class="st8 st9 st10 hq">Бассейн</text> 
<text transform="matrix(1 0 0 1 1210.2422 526.5333)" class="st8 st9 st10 hq">Косметология</text> 
 
<text transform="matrix(1 0 0 1 900.8433 1032.0553)" class="st8 st9 st10"></text> 
</svg>

Answer 1

Все работает: path:hover или .st1:hover:

path:hover { 
    fill:grey; 
}
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
   viewBox="0 0 1924 1195" style="enable-background:new 0 0 1924 1195;" xml:space="preserve"> 
<style type="text/css"> 
  .st0{fill:none;} 
  .st1{fill:url(#img);stroke:#AC8D59;stroke-width:2;} 
  .st2{fill:url(#img1);stroke:#AC8D59;stroke-width:2;} 
  .st3{fill:#F4EFE3;stroke:#AC8D59;stroke-width:2;} 
  .st4{fill:#F4EFE3;stroke:#AC8D59;stroke-width:2;} 
  .st5{fill:url(#img2);stroke:#AC8D59;stroke-width:2;} 
  .st6{fill:url(#img3);stroke:#AC8D59;stroke-width:2;} 
  .st7{fill:#AC8D59;} 
  .st8{fill:#FFFFFF;} 
  .st9{font-family:'NautilusPompilius';} 
    .st10{font-size:25.4038px;} 
    . 
 
</style> 
 
 <pattern id="img"  width="100%" height="100%"> 
                            <image id= "img" x="0" y="0" width="600" height="390" xlink:href="http://glavnarzan.ru/wp-content/themes/white_narzan/assets/img/gallery/Narzan-fun-3.jpg"></image> 
                            </pattern> 
<pattern id="img1"  width="100%" height="100%"> 
                            <image id= "img" x="0" y="0" width="480" height="350" xlink:href="http://glavnarzan.ru/wp-content/themes/white_narzan/assets/img/spa_photo_two.png"></image> 
                            </pattern> 
<pattern id="img2"  width="100%" height="100%"> 
                            <image id= "img" x="0" y="0" width="470" height="340" xlink:href="http://glavnarzan.ru/wp-content/themes/white_narzan/assets/img/spa_photo_one.png"></image> 
                            </pattern> 
<pattern id="img3"  width="100%" height="100%"> 
                            <image id= "img" x="0" y="0" width="570" height="360" xlink:href="http://glavnarzan.ru/wp-content/themes/white_narzan/assets/img/gallery/Narzan-fun-1.jpg"></image> 
                            </pattern> 
 
<path class="st1 qw" d="M883.2,472.7L782.7,304.6l99.9-168.5l200.5-0.2L1183.6,304l-99.9,168.5L883.2,472.7z"  />                           
<path class="st2 qw" d="M1185.5,641.2L1085,473.1l99.9-168.5l200.5-0.2l100.6,168.1L1386,641L1185.5,641.2z"/> 
<path class="st3 qw" d="M1185.5,978L1085,809.9l99.9-168.5l200.5-0.2l100.6,168.1L1386,977.8L1185.5,978z"/> 
<path class="st4 qw" d="M883.2,1146.5L782.7,978.4l99.9-168.5l200.5-0.2l100.6,168.1l-99.9,168.5L883.2,1146.5z"/> 
<path class="st5 qw" d="M584.1,641.2L483.6,473.1l99.9-168.5l200.5-0.2l100.6,168.1L784.6,641L584.1,641.2z"/> 
<path class="st6 qw" d="M584.1,978L483.6,809.9l99.9-168.5l200.5-0.2l100.6,168.1l-99.9,168.5L584.1,978z"/> 
<path class="st3 qw" d="M883.2,809.6L782.7,641.5L882.6,473l200.5-0.2l100.6,168.1l-99.9,168.5L883.2,809.6z"/> 
<image style="overflow:visible;" x="100" y="50" width="250" height="187" xlink:href="http://wp/wp-content/themes/white_narzan/assets/img/logo_foot.png"  transform="matrix(0.6609 0 0 0.6609 1126.8506 708.8438)"> 
</image> 
<polygon class="st7" points="839.7,888.9 531.3,890.6 496.9,832.3 871,832.1 "/> 
<polygon class="st7" points="839.7,547 528.2,547.7 494.2,490.9 871,490.2 "/> 
<polygon class="st7" points="1138.9,378.2 830.5,379.9 792.8,321.6 1174.1,322.8 "/> 
<polygon class="st7" points="1441.2,547 1126.3,548.6 1091.9,490.3 1475.4,490.2 "/> 
<text transform="matrix(1 0 0 1 640.4487 868.3776)" class="st8 st9 st10 hq">Хамам</text> 
<text transform="matrix(1 0 0 1 640.4487 530.7667)" class="st8 st9 st10 hq">Массаж</text> 
<text transform="matrix(1 0 0 1 930.2485 356.9484)" class="st8 st9 st10 hq">Бассейн</text> 
<text transform="matrix(1 0 0 1 1210.2422 526.5333)" class="st8 st9 st10 hq">Косметология</text> 
 
<text transform="matrix(1 0 0 1 900.8433 1032.0553)" class="st8 st9 st10"></text> 
</svg>

По поводу торможения работы svg, то посоветую вставить изображения поменьше:

path { 
  cursor: pointer; 
} 
 
path:hover { 
    fill:grey; 
} 
 
 
.st1:hover~#x-3 { 
  fill: #000; 
} 
 
.st2:hover~#x-4 { 
  fill: #000; 
} 
 
.st6:hover~#x-1 { 
  fill: #000; 
} 
 
.st5:hover~#x-2 { 
  fill: #000; 
}
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 1924 1195" > 
  <style type="text/css"> 
    .st0{fill:none;} 
    .st1{fill:url(#img);stroke:#AC8D59;stroke-width:2;} 
    .st2{fill:url(#img1);stroke:#AC8D59;stroke-width:2;} 
    .st3{fill:#F4EFE3;stroke:#AC8D59;stroke-width:2;} 
    .st4{fill:#F4EFE3;stroke:#AC8D59;stroke-width:2;} 
    .st5{fill:url(#img2);stroke:#AC8D59;stroke-width:2;} 
    .st6{fill:url(#img3);stroke:#AC8D59;stroke-width:2;} 
    .st7{fill:#AC8D59;} 
    .st8{fill:#FFFFFF;} 
    .st9{font-family:'NautilusPompilius';} 
    .st10{font-size:25.4038px;} 
  </style> 
 
  <pattern id="img"  width="100%" height="100%"> 
     <image id= "img" x="0" y="0" width="600" height="390" xlink:href="https://dummyimage.com/600x390/ccc/fff&text=1"></image> 
  </pattern> 
  <pattern id="img1"  width="100%" height="100%"> 
    <image id= "img" x="0" y="0" width="480" height="350" xlink:href="https://dummyimage.com/480x350/ccc/fff&text=2"></image> 
  </pattern> 
  <pattern id="img2"  width="100%" height="100%"> 
    <image id= "img" x="0" y="0" width="470" height="340" xlink:href="https://dummyimage.com/470x340/ccc/fff&text=3"></image> 
  </pattern> 
  <pattern id="img3"  width="100%" height="100%"> 
    <image id= "img" x="0" y="0" width="570" height="360" xlink:href="https://dummyimage.com/570x360/ccc/fff&text=4"></image> 
  </pattern> 
 
  <path class="st1 qw" d="M883.2,472.7L782.7,304.6l99.9-168.5l200.5-0.2L1183.6,304l-99.9,168.5L883.2,472.7z"  />                           
  <path class="st2 qw" d="M1185.5,641.2L1085,473.1l99.9-168.5l200.5-0.2l100.6,168.1L1386,641L1185.5,641.2z"/> 
  <path class="st3 qw" d="M1185.5,978L1085,809.9l99.9-168.5l200.5-0.2l100.6,168.1L1386,977.8L1185.5,978z"/> 
  <path class="st4 qw" d="M883.2,1146.5L782.7,978.4l99.9-168.5l200.5-0.2l100.6,168.1l-99.9,168.5L883.2,1146.5z"/> 
  <path class="st5 qw" d="M584.1,641.2L483.6,473.1l99.9-168.5l200.5-0.2l100.6,168.1L784.6,641L584.1,641.2z"/> 
  <path class="st6 qw" d="M584.1,978L483.6,809.9l99.9-168.5l200.5-0.2l100.6,168.1l-99.9,168.5L584.1,978z"/> 
  <path class="st3 qw" d="M883.2,809.6L782.7,641.5L882.6,473l200.5-0.2l100.6,168.1l-99.9,168.5L883.2,809.6z"/> 
 
  <image style="overflow:visible;" x="100" y="50" width="250" height="187" xlink:href="https://dummyimage.com/250x200/ccc/fff&text=logo"  transform="matrix(0.6609 0 0 0.6609 1126.8506 708.8438)"> 
  </image> 
 
  <polygon id="x-1" class="st7" points="839.7,888.9 531.3,890.6 496.9,832.3 871,832.1 "/> 
  <polygon id="x-2" class="st7" points="839.7,547 528.2,547.7 494.2,490.9 871,490.2 "/> 
  <polygon id="x-3" class="st7" points="1138.9,378.2 830.5,379.9 792.8,321.6 1174.1,322.8 "/> 
  <polygon id="x-4" class="st7" points="1441.2,547 1126.3,548.6 1091.9,490.3 1475.4,490.2 "/> 
 
  <text transform="matrix(1 0 0 1 640.4487 868.3776)" class="st8 st9 st10 hq">Хамам</text> 
  <text transform="matrix(1 0 0 1 640.4487 530.7667)" class="st8 st9 st10 hq">Массаж</text> 
  <text transform="matrix(1 0 0 1 930.2485 356.9484)" class="st8 st9 st10 hq">Бассейн</text> 
  <text transform="matrix(1 0 0 1 1210.2422 526.5333)" class="st8 st9 st10 hq">Косметология</text> 
 
  <text transform="matrix(1 0 0 1 900.8433 1032.0553)" class="st8 st9 st10"></text> 
</svg>

READ ALSO
Ошибка в двумерном массиве

Ошибка в двумерном массиве

Создается двумерный массив, который заполняется знаком -, а при i == 2, строка должна заполниться знаком +, но этого не происходитПочему?

160
Не работает switch (окончание слова, скрипт) [закрыт]

Не работает switch (окончание слова, скрипт) [закрыт]

введите сюда кодhttps://codepenio/anon/pen/YJrVJM

127
Удаление элементов списка с помощью javascript [дубликат]

Удаление элементов списка с помощью javascript [дубликат]

Данный вопрос является точным дубликатом:

142