Есть два модальных окна на 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
