Jquery svg не добавляется класс
На странице есть svg-шка. Есть скрипт
$( document ).ready(function() {
$('.thanka .th_item').on('click', function(e){
var tnid = e.target.getAttribute('tnid');
...
$('.tbl_one_item').removeClass('selected_node');
$('.tbl_one_item#tbl_'+tnid).addClass('selected_node');
});
});
и стиль, встроенный в страницу, не в саму svg-шку
<style>
svg .selected_node {
stroke:red;
stroke-width:5;
}
</style>
Класс не добавляется. jQuery v3.4.1
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"><script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<style>
svg .selected_node {
stroke:red;
stroke-width:5;
}
</style>
<script type="text/javascript">
$( document ).ready(function() {
$('.thanka .th_item').on('click', function(e){
var tnid = e.target.getAttribute('tnid');
$('.tbl_one_item').hide();
$('.tbl_one_item#tbl_'+tnid).show();
$('.tbl_one_item').removeClass('selected_node');
$('.tbl_one_item#tbl_'+tnid).addClass('selected_node');
});
});
</script>
<title>Редактирование тханки Навигатор1 #1791 </title>
</head><body><svg height="400" width="400" class="thanka">
<script type="text/ecmascript">
function getMatrixForRotation(a, cx, cy)
{
var ca = Math.cos(a * Math.PI / 180);
var sa = Math.sin(a * Math.PI / 180);
var a = ca.toFixed(4);
var b = sa.toFixed(4);
var c = (-sa).toFixed(4);
var d = ca.toFixed(4);
var e = (-ca * cx + sa * cy + cx).toFixed(4);
var f = (-sa * cx - ca * cy + cy).toFixed(4);
return "matrix(" + [a,b,c,d,e,f].join(' ') + ")";
}
var dstart = {x: -1, y: -1};
var dend = {x: -1, y: -1};
</script>
<style>
path.move_scrl:hover path {
stroke: yellowgreen;
stroke-width: 2;
transition: all ease 0.3s;
}
path.move_scrl path {
transition: all ease 0.3s;
}
</style>
<defs>
<g id="arr_move" style="cursor:pointer">
<g id="surface1">
<path class="move_scrl" style="fill-rule:nonzero;fill:rgb(100%,81.960784%,36.470588%);fill-opacity:1;" d="M 20 10 C 20 15.523438 15.523438 20 10 20 C 4.476562 20 0 15.523438 0 10 C 0 4.476562 4.476562 0 10 0 C 15.523438 0 20 4.476562 20 10 Z M 20 10 "></path>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(97.647059%,70.980392%,29.803922%);fill-opacity:1;" d="M 11.839844 19.832031 C 15.894531 19.078125 19.085938 15.878906 19.835938 11.820312 L 12.773438 4.738281 L 10.082031 4.214844 L 7.53125 5.777344 L 10.21875 8.46875 L 9.527344 17.542969 Z M 11.839844 19.832031 "></path>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(19.607843%,29.019608%,36.862745%);fill-opacity:1;" d="M 12.867188 4.828125 L 10.679688 2.640625 C 10.414062 2.378906 9.988281 2.378906 9.726562 2.640625 L 7.539062 4.828125 C 7.34375 5.023438 7.285156 5.3125 7.390625 5.5625 C 7.496094 5.816406 7.742188 5.980469 8.011719 5.980469 L 9.527344 5.980469 L 9.527344 17.542969 L 10.875 17.542969 L 10.875 5.980469 L 12.390625 5.980469 C 12.664062 5.980469 12.910156 5.816406 13.011719 5.5625 C 13.117188 5.3125 13.058594 5.023438 12.867188 4.828125 Z M 12.867188 4.828125 "></path>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(16.862745%,23.137255%,30.588235%);fill-opacity:1;" d="M 12.867188 4.828125 L 10.679688 2.640625 C 10.550781 2.515625 10.390625 2.449219 10.222656 2.445312 L 10.222656 17.542969 L 10.875 17.542969 L 10.875 5.980469 L 12.390625 5.980469 C 12.664062 5.980469 12.910156 5.816406 13.011719 5.5625 C 13.117188 5.3125 13.058594 5.023438 12.867188 4.828125 Z M 12.867188 4.828125 "></path>
</g>
</g>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"></stop>
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"></stop>
</linearGradient>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1"></stop>
<stop offset="100%" style="stop-color:rgb(255,0,255);stop-opacity:1"></stop>
</linearGradient>
<pattern id="img_main" patternUnits="userSpaceOnUse" width="400" height="400">
<image href="/img/_1791.gif" x="100" y="100" width="200" height="200"></image>
</pattern>
<pattern id="img_1" patternUnits="userSpaceOnUse" width="200" height="200">
<image href="/img/_1792.jpg" x="0" y="0" width="200" height="200"></image>
</pattern>
<pattern id="img_1_main" patternUnits="userSpaceOnUse" width="400" height="400">
<image href="/img/_1792.jpg" x="100" y="100" width="200" height="200"></image>
</pattern>
<pattern id="img_1_1" patternUnits="userSpaceOnUse" width="200" height="200">
<image href="/img/_1793.jpg" x="0" y="0" width="200" height="200"></image>
</pattern>
<pattern id="img_1_1_main" patternUnits="userSpaceOnUse" width="400" height="400">
<image href="/img/_1793.jpg" x="100" y="100" width="200" height="200"></image>
</pattern>
<pattern id="img_1_2" patternUnits="userSpaceOnUse" width="200" height="200">
<image href="/img/_1794.jpg" x="0" y="0" width="200" height="200"></image>
</pattern>
<pattern id="img_1_2_main" patternUnits="userSpaceOnUse" width="400" height="400">
<image href="/img/_1794.jpg" x="100" y="100" width="200" height="200"></image>
</pattern>
<pattern id="img_1_3" patternUnits="userSpaceOnUse" width="200" height="200">
<image href="/img/_1795.jpeg" x="0" y="0" width="200" height="200"></image>
</pattern>
<pattern id="img_1_3_main" patternUnits="userSpaceOnUse" width="400" height="400">
<image href="/img/_1795.jpeg" x="100" y="100" width="200" height="200"></image>
</pattern>
<pattern id="img_2" patternUnits="userSpaceOnUse" width="200" height="200">
<image href="/img/_1796.jpg" x="0" y="0" width="200" height="200"></image>
</pattern>
<pattern id="img_2_main" patternUnits="userSpaceOnUse" width="400" height="400">
<image href="/img/_1796.jpg" x="100" y="100" width="200" height="200"></image>
</pattern>
<pattern id="img_2_1" patternUnits="userSpaceOnUse" width="200" height="200">
<image href="/img/_1797.jpg" x="0" y="0" width="200" height="200"></image>
</pattern>
<pattern id="img_2_1_main" patternUnits="userSpaceOnUse" width="400" height="400">
<image href="/img/_1797.jpg" x="100" y="100" width="200" height="200"></image>
</pattern>
<pattern id="img_2_2" patternUnits="userSpaceOnUse" width="200" height="200">
<image href="/img/_1798.jpeg" x="0" y="0" width="200" height="200"></image>
</pattern>
<pattern id="img_2_2_main" patternUnits="userSpaceOnUse" width="400" height="400">
<image href="/img/_1798.jpeg" x="100" y="100" width="200" height="200"></image>
</pattern>
<pattern id="img_2_3" patternUnits="userSpaceOnUse" width="200" height="200">
<image href="/img/_1799.jpg" x="0" y="0" width="200" height="200"></image>
</pattern>
<pattern id="img_2_3_main" patternUnits="userSpaceOnUse" width="400" height="400">
<image href="/img/_1799.jpg" x="100" y="100" width="200" height="200"></image>
</pattern>
<pattern id="img_3" patternUnits="userSpaceOnUse" width="200" height="200">
<image href="/img/_1800.jpg" x="0" y="0" width="200" height="200"></image>
</pattern>
<pattern id="img_3_main" patternUnits="userSpaceOnUse" width="400" height="400">
<image href="/img/_1800.jpg" x="100" y="100" width="200" height="200"></image>
</pattern>
<pattern id="img_3_1" patternUnits="userSpaceOnUse" width="200" height="200">
<image href="/img/_1801.jpg" x="0" y="0" width="200" height="200"></image>
</pattern>
<pattern id="img_3_1_main" patternUnits="userSpaceOnUse" width="400" height="400">
<image href="/img/_1801.jpg" x="100" y="100" width="200" height="200"></image>
</pattern>
<pattern id="img_3_2" patternUnits="userSpaceOnUse" width="200" height="200">
<image href="/img/_1802.jpg" x="0" y="0" width="200" height="200"></image>
</pattern>
<pattern id="img_3_2_main" patternUnits="userSpaceOnUse" width="400" height="400">
<image href="/img/_1802.jpg" x="100" y="100" width="200" height="200"></image>
</pattern>
<pattern id="img_3_3" patternUnits="userSpaceOnUse" width="200" height="200">
<image href="/img/_1803.jpg" x="0" y="0" width="200" height="200"></image>
</pattern>
<pattern id="img_3_3_main" patternUnits="userSpaceOnUse" width="400" height="400">
<image href="/img/_1803.jpg" x="100" y="100" width="200" height="200"></image>
</pattern>
<pattern id="img_4" patternUnits="userSpaceOnUse" width="200" height="200">
<image href="/img/_1804.jpg" x="0" y="0" width="200" height="200"></image>
</pattern>
<pattern id="img_4_main" patternUnits="userSpaceOnUse" width="400" height="400">
<image href="/img/_1804.jpg" x="100" y="100" width="200" height="200"></image>
</pattern>
<pattern id="img_4_1" patternUnits="userSpaceOnUse" width="200" height="200">
<image href="/img/_1805.jpg" x="0" y="0" width="200" height="200"></image>
</pattern>
<pattern id="img_4_1_main" patternUnits="userSpaceOnUse" width="400" height="400">
<image href="/img/_1805.jpg" x="100" y="100" width="200" height="200"></image>
</pattern>
<pattern id="img_4_2" patternUnits="userSpaceOnUse" width="200" height="200">
<image href="/img/_1806.jpg" x="0" y="0" width="200" height="200"></image>
</pattern>
<pattern id="img_4_2_main" patternUnits="userSpaceOnUse" width="400" height="400">
<image href="/img/_1806.jpg" x="100" y="100" width="200" height="200"></image>
</pattern>
<pattern id="img_4_3" patternUnits="userSpaceOnUse" width="200" height="200">
<image href="/img/_1807.jpg" x="0" y="0" width="200" height="200"></image>
</pattern>
<pattern id="img_4_3_main" patternUnits="userSpaceOnUse" width="400" height="400">
<image href="/img/_1807.jpg" x="100" y="100" width="200" height="200"></image>
</pattern>
</defs>
<path class="th_item" imageid="_1" tnid="1792" d="M0, 0
L200,0
L 200,29
A171,171 1 0, 0 29, 200 L 0,200 z" alt="ЛЮДИ" style="fill:url(#img_1);stroke:rgb(0,0,0);cursor:pointer" stroke-width="1"></path>
<path class="th_item" imageid="_2" tnid="1796" d="M200,0
L 400,0
L 400,200
L 371,200
A171,171 1 0, 0 200, 29 z" alt="Проекты-идеи" style="fill:url(#img_2);stroke:rgb(0,0,0);cursor:pointer" stroke-width="1"></path>
<path class="th_item" imageid="_3" tnid="1800" d="M400,200
L 400,400
L 200,400
L 200,371
A171,171 1 0, 0 371, 200 z" alt="Продукты-услуги" style="fill:url(#img_3);stroke:rgb(0,0,0);cursor:pointer" stroke-width="1"></path>
<path class="th_item" imageid="_4" tnid="1804" d="M200,400
L 0,400
L 0,200
L 29,200
A171,171 1 0, 0 200, 371 z" alt="Связи-логистика" style="fill:url(#img_4);stroke:rgb(0,0,0);cursor:pointer" stroke-width="1"></path>
<g id="kvadr_0_sectors">
<path class="th_item" imageid="_1_1" d="M301,200 L370,200
A170,170 1 0,1 347.22431864335,285
L287.46856578223,250.5
A101, 101 1 0, 0 301,200 z" alt="Строительство-транспорт-производство" fill="url(#img_1_1)" tnid="1793" stroke="rgba(2,2,0, 1)" style="cursor:pointer" viewBox="200 200 170 170" stroke-width="1">
</path>
<path class="th_item" imageid="_1_2" d="M287.46856578223,250.5 L347.22431864335,285
A170,170 1 0,1 285,347.22431864335
L250.5,287.46856578223
A101, 101 1 0, 0 287.46856578223,250.5 z" alt="Бизнес-кооперация-синергия" fill="url(#img_1_2)" tnid="1794" stroke="rgba(2,2,0, 1)" style="cursor:pointer" viewBox="200 200 170 170" stroke-width="1">
</path>
<path class="th_item" imageid="_1_3" d="M250.5,287.46856578223 L285,347.22431864335
A170,170 1 0,1 200,370
L200,301
A101, 101 1 0, 0 250.5,287.46856578223 z" alt="Экспертиза-аналитика-знания" fill="url(#img_1_3)" tnid="1795" stroke="rgba(2,2,0, 1)" style="cursor:pointer" viewBox="200 200 170 170" stroke-width="1">
</path>
</g>
<g id="kvadr_1_sectors">
<path class="th_item" imageid="_2_1" d="M200,301 L200,370
A170,170 1 0,1 115,347.22431864335
L149.5,287.46856578223
A101, 101 1 0, 0 200,301 z" alt="Презентация-Инструкция-Навигатор" fill="url(#img_2_1)" tnid="1797" stroke="rgba(2,2,0, 1)" style="cursor:pointer" viewBox="200 200 170 170" stroke-width="1">
</path>
<path class="th_item" imageid="_2_2" d="M149.5,287.46856578223 L115,347.22431864335
A170,170 1 0,1 52.775681356645,285
L112.53143421777,250.5
A101, 101 1 0, 0 149.5,287.46856578223 z" alt="Образование-обучение-квалификация" fill="url(#img_2_2)" tnid="1798" stroke="rgba(2,2,0, 1)" style="cursor:pointer" viewBox="200 200 170 170" stroke-width="1">
</path>
<path class="th_item" imageid="_2_3" d="M112.53143421777,250.5 L52.775681356645,285
A170,170 1 0,1 30,200
L99,200
A101, 101 1 0, 0 112.53143421777,250.5 z" alt="Поисковики-Каталоги-Коммуникации" fill="url(#img_2_3)" tnid="1799" stroke="rgba(2,2,0, 1)" style="cursor:pointer" viewBox="200 200 170 170">
</path>
</g>
<g id="kvadr_2_sectors">
<path class="th_item" imageid="_3_1" d="M99,200 L30,200
A170,170 1 0,1 52.775681356645,115
L112.53143421777,149.5
A101, 101 1 0, 0 99,200 z" alt="Авторы-инициации-владельцы" fill="url(#img_3_1)" tnid="1801" stroke="rgba(2,2,0, 1)" style="cursor:pointer" viewBox="200 200 170 170" stroke-width="1">
</path>
<path class="th_item" imageid="_3_2" d="M112.53143421777,149.5 L52.775681356645,115
A170,170 1 0,1 115,52.775681356645
L149.5,112.53143421777
A101, 101 1 0, 0 112.53143421777,149.5 z" alt="Кадры-рекомендации-поручители" fill="url(#img_3_2)" tnid="1802" stroke="rgba(2,2,0, 1)" style="cursor:pointer" viewBox="200 200 170 170" stroke-width="1">
</path>
<path class="th_item" imageid="_3_3" d="M149.5,112.53143421777 L115,52.775681356645
A170,170 1 0,1 200,30
L200,99
A101, 101 1 0, 0 149.5,112.53143421777 z" alt="Товары-продукты-жизнеобеспечение" fill="url(#img_3_3)" tnid="1803" stroke="rgba(2,2,0, 1)" style="cursor:pointer" viewBox="200 200 170 170" stroke-width="1">
</path>
</g>
<g id="kvadr_3_sectors">
<path class="th_item" imageid="_4_1" d="M200,99 L200,30
A170,170 1 0,1 285,52.775681356645
L250.5,112.53143421777
A101, 101 1 0, 0 200,99 z" alt="Партнеры-услуги-связи" fill="url(#img_4_1)" tnid="1805" stroke="rgba(2,2,0, 1)" style="cursor:pointer" viewBox="200 200 170 170" stroke-width="1">
</path>
<path class="th_item" imageid="_4_2" d="M250.5,112.53143421777 L285,52.775681356645
A170,170 1 0,1 347.22431864335,115
L287.46856578223,149.5
A101, 101 1 0, 0 250.5,112.53143421777 z" alt="Инновации-технологии-идеи" fill="url(#img_4_2)" tnid="1806" stroke="rgba(2,2,0, 1)" style="cursor:pointer" viewBox="200 200 170 170" stroke-width="1">
</path>
<path class="th_item" imageid="_4_3" d="M287.46856578223,149.5 L347.22431864335,115
A170,170 1 0,1 370,200
L301,200
A101, 101 1 0, 0 287.46856578223,149.5 z" alt="Проекты-концепции-законы" fill="url(#img_4_3)" tnid="1807" stroke="rgba(2,2,0, 1)" style="cursor:pointer" viewBox="200 200 170 170" stroke-width="1">
</path>
</g>
<circle id="main_circle" class="th_item" tnid="1791" cx="200" cy="200" style="cursor: pointer; fill: url("#img_main");" r="100" alt="Навигатор1" stroke="rgb(0,0,0)" stroke-width="1" fill="url(#img_main)" ></circle>
</svg>
<div style="display:inline-block; height:400px;">
</div></body>
</html>