LINUX.ORG.RU

Не загружаются изображения для svg при подгрузке

 , , , ,


0

1

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

``` В окно просмотра объектов все подгружается нормально. А вот в окне редактирования объектов картинки перестают быть видимыми после того как хотя бы один раз открыли окно просмотра.


Последнее исправление: dwarfadelic (всего исправлений: 1)

Код оформите, у вас ведь маркдаун включён.

fernandos ★★★
()
Последнее исправление: fernandos (всего исправлений: 1)

Надо сделать минимальный нерабочий пример, где это воспроизводится. Без jquery и прочей ботвы. Никто не будет разбираться, что там не так в вашем коде.

crutch_master ★★★★★
()
Последнее исправление: crutch_master (всего исправлений: 1)
Ответ на: комментарий от crutch_master

https://codepen.io/anton-kuzmenko/pen/MWpEKGE Удалось смоделировать. В одной модалке подгружается фон по ссылке, в другой нет. Видимо костыль нужен какой-то.

dwarfadelic
() автор топика
Последнее исправление: dwarfadelic (всего исправлений: 2)
Ответ на: комментарий от dwarfadelic

А что ты он него хочешь? У второго svg сделай другое id паттерна.

<pattern id="pattern2" width="100%" height="100%">
...
<polygon fill="url(#pattern2)" 
...

crutch_master ★★★★★
()
Ответ на: комментарий от dwarfadelic

Видимо костыль нужен какой-то.

Да ладно. Всё еще не так плохо, чтобы костыли вставлять себе в колёса.

crutch_master ★★★★★
()
Последнее исправление: crutch_master (всего исправлений: 1)
Ответ на: комментарий от crutch_master

попробовал так сделать. помогло. но все же это странное поведение svg-движков. Картинки сами по себе разные, а действует как будто в одном пространстве.

dwarfadelic
() автор топика
Последнее исправление: dwarfadelic (всего исправлений: 1)
Ответ на: комментарий от dwarfadelic

Что странного? Id сквозной по всему документу, а не в контексте одного svg. Да и вообще svg - просто кусок этой же dom модели, а не отдельное государство.

crutch_master ★★★★★
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.