Есть два модальных окна на 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 частично или полностью.
Удалось смоделировать сей глюк в вакууме :
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Modal1
</button>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal2">
Modal2
</button>
<!-- Modal 1 -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal 1</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<svg>
<pattern id="pattern" width="100%" height="100%">
<image xlink:href="https://img-fotki.yandex.ru/get/10/yoksel.4e/0_398a6_1f246823_M" width="300" height="200" />
</pattern>
<polygon fill="url(#pattern)" stroke="turquoise" stroke-width="4" points="85,0 170,61 137,161 32,161 0,61" transform="translate(65,20)" />
</svg>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Modal 2 -->
<div class="modal fade" id="exampleModal2" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal 2</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<svg>
<pattern id="pattern" width="100%" height="100%">
<image xlink:href="https://img-fotki.yandex.ru/get/10/yoksel.4e/0_398a6_1f246823_M" width="300" height="200" />
</pattern>
<polygon fill="url(#pattern)" stroke="turquoise" stroke-width="4" points="85,0 170,61 137,161 32,161 0,61" transform="translate(65,20)" />
</svg>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</body>
</html>