Добрый день столкнулся с такой проблемой , что 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>
Все работает: 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>
Виртуальный выделенный сервер (VDS) становится отличным выбором
Создается двумерный массив, который заполняется знаком -, а при i == 2, строка должна заполниться знаком +, но этого не происходитПочему?
Записываю json в переменную:
введите сюда кодhttps://codepenio/anon/pen/YJrVJM
Данный вопрос является точным дубликатом: