Измените высоту родительского SVG, которую создает SVG. js - PullRequest
Новая
       28

Измените высоту родительского SVG, которую создает SVG. js

0 голосов
/ 05 марта 2020

Я использую SVG. js на плагине WordPress, и до сих пор все работает, кроме мелочей. Я загружаю внешний SVG, который загружается. Анимация работает, но когда она подпрыгивает, она обрывается.

Затем я заметил, что есть еще один контейнер SVG, который создается на один уровень выше, а внутри этого родительского SVG находится мой загруженный SVG. Я не могу изменить этот родительский иметь ширину и высоту за пределами 300px по умолчанию. Я прочитал в FAQ по SVG. js, что это сделано намеренно, но я не могу найти способ получить к нему доступ, чтобы указать высоту. Любой совет? 

var svg_local_load;
var ajax_svg = ajaxsvg.svglocation;


SVG.on(document, 'DOMContentLoaded', function() {

    	 	//gets SVG
    	 	$.ajax({
    	 		url: ajax_svg,
    	 		type: 'GET',
    	 		async: false,
    	 		dataType: "text",
    	 		success: function(resp){
    	 			svg_local_load = resp;
    	 		}
    	 	});

    	 	//Loads SVG
    	 	var draw = SVG().addTo('#svg_foo_id');

    	 	var svg_grp = draw.group().id('btn_game_save_id');

    	 	//var parent = draw.parent(SVG.Svg);

    	 	svg_grp.add(svg_local_load);

    	 	svg_grp.animate(1000, 'bounce').move(0, -20).loop(true, true);


    	 });

1 Ответ

1 голос
/ 05 марта 2020

Я начну с объяснения того, что на самом деле делает ваш код.

  1. Вы запускаете запрос ajax, который в итоге устанавливает переменную (это важно немного).

  2. Затем вы создаете <svg>, вызывая SVG(), и добавляете его в элемент с идентификатором svg_foo_id. Этот элемент должен быть <div> или аналогичным (если это элемент <svg>, вы уже ошиблись здесь. Вы не опубликовали код html, поэтому мне нужно угадать.

  3. Далее Вы создаете группу в уже созданном SVG.

  4. В ЭТУ группе вы помещаете загруженное содержимое запроса ajax НО этого содержимое еще даже не загружено.

На данный момент мне интересно, почему он вообще показывает какой-либо контент, потому что svg_local_load все еще должен быть undefined, потому что запрос ajax еще не выполнен и не может установить переменную.
Совет: Поместите весь код в success обратный вызов запроса ajax или вызовите функцию, которая создает svg.

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

Возвращаясь к вашему вопросу: Вы никогда не устанавливали size() SVG, который вы создали в начале. Вы можете сделать это с помощью draw.size(1000, 1000). Если есть <svg> уровень выше этого, см. пункт 2

...