Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Не загружаются изображения для svg при подгрузке (https://javascript.ru/forum/dom-window/82573-ne-zagruzhayutsya-izobrazheniya-dlya-svg-pri-podgruzke.html)

magnuz 27.05.2021 13:00

Не загружаются изображения для 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

magnuz 28.05.2021 12:05

Выяснилось, что система этих паттернов и их айдишников сплошная по всей странице и нужно в таком случае делать разные айдишники для разных свгшек.


Часовой пояс GMT +3, время: 04:42.