Не загружаются изображения для svg при подгрузке
Есть два модальных окна на bootstrap 4 для разных целей. В них подгружается код с svg из разных источников. В источниках выдается такого рода код :
... echo json_encode([ 'title'=>$th1->MainNode->title, 'html'=>$html ]); Код кнопок такого рода : function edit_thanka(tid) { $.ajax({ type: 'GET', url:'ajax/thanka/edit.php?id='+tid+"&t="+Math.random(), processData: false, contentType: false, success: function(res) { $('#edit_th_body').html(res.html); $('#edit_th_header').html("Редактирование тханки "+res.title); $('#edit_th_body .th_item').on('click', clicknode_ev); $('#modalEditThanka').modal('show'); }, error: function (error) { //$('#resdiv').html(returnval); console.log('error; ' + eval(error)); } }); /* $('#edit_th_body').load('ajax/thanka/edit.php?id='+tid, function(responseText,textStatus, xhr) { $('#edit_th_body .th_item').on('click', clicknode_ev); $('#modalEditThanka').modal('show'); });*/ } Внутри svg подключение картинок с сервера выглядит так : ... <defs> ... <pattern id="img_367_main" patternUnits="userSpaceOnUse" width="400" height="400"> <image href="/pictures/thankas/367.webp" x="100" y="100" width="200" height="200"></image> </pattern> ... </defs> ... <path class="th_item" imageid="376" d="M200,99 L200,30 A170,170 1 0,1 370,200 L301,200 A101, 101 1 0, 0 200,99 z" alt="Node369" fill="url(#img_376)" tnid="376" stroke="rgba(2,2,0, 1)" style="cursor:pointer" onmouseover="mouseenter(evt)" onmouseout="mouseleave(evt)" viewBox="200 200 170 170" stroke-width="1"></path> ... В окно просмотра объектов все подгружается нормально. А вот в окне редактирования объектов картинки перестают быть видимыми после того как хотя бы один раз открыли окно просмотра. Удалось смоделировать сей глюк в вакууме : https://codepen.io/anton-kuzmenko/pen/MWpEKGE |
Выяснилось, что система этих паттернов и их айдишников сплошная по всей странице и нужно в таком случае делать разные айдишники для разных свгшек.
|
Часовой пояс GMT +3, время: 14:48. |