Преобразование Snap.svg не работает - возможна проблема с выбором элемента? - PullRequest
Новая
       6

Преобразование Snap.svg не работает - возможна проблема с выбором элемента?

0 голосов
/ 07 мая 2018 

function base_axes() {
	var s = Snap("#base_axes");
	var dim = 0.1*window.innerWidth;
	var x_line = s.line(0, dim, 0, dim);
	x_line.attr("stroke", "#5e0734");
	x_line.attr("stroke-width", "5px");
	x_line.animate({
		x2: window.innerWidth
	}, 1000, mina.easein);
	var y_line = s.line(dim, 0, dim, 0);
	y_line.attr("stroke", "#5e0734");
	y_line.attr("stroke-width", "5px");
	y_line.animate({
		y2: window.innerHeight
	}, 1000, mina.easein);
	Snap.load('https://upload.wikimedia.org/wikipedia/commons/3/35/Tux.svg', function(data) {
		var logo = s.append(data);
		var bbox = logo.getBBox();
		var scale_factor = dim/bbox.height;
		var transform_string = "s" + scale_factor + "," + scale_factor;
		logo.transform(transform_string);
	});
}
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/snap.svg.js"></script>
<body onload="base_axes()">

		<svg id="base_axes" height="100%" width="100%"></svg>

Я использую это для загрузки SVG в другой SVG, а затем преобразовать его: 

<svg id="base" height="100%" width="100%"></svg>

JS: 

var s = Snap("#base");
var dim = 1;
    Snap.load('img.svg', function(data) {
            var logo = s.append(data);
            var bbox = logo.getBBox();
            console.log(bbox);
            var scale_factor = dim/bbox.height;
            var transform_string = "'s" + scale_factor + "," + scale_factor + "'";
            logo.transform(transform_string);
        });

Но ничего не происходит.Чтобы устранить неполадки, я заменил нижнюю строку на logo.transform('s0.1,0.1'), и это тоже не удалось.Что-то не так с созданием logo?

Чтобы уточнить - первый svg, #id, выбран правильно, новый svg (логотип) правильно добавлен к нему, и bbox вычислен правильно,но окончательное преобразование ничего не делает.Строка преобразования выглядит правильно, вычисляя s0.03,0.03, но последняя строка logo.transform(transform_string) ничего не делает.

1 Ответ

0 голосов
/ 07 мая 2018

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

var logo = s.append(data);

Если вы посмотрите на документы здесь , он говорит, что возвращает родительский элемент. Итак, вы говорите «логотип = элемент SVG».

Элемент svg не допускает преобразований (в некоторых браузерах см. Комментарий Робертса ниже).

Таким образом, вы либо хотите выбрать, например, элемент 'g' в логотипе svg, выбрав его (например, s.select ('# logo') или Snap ('# logo'), но мы этого не видели чтобы узнать, существует ли он), или добавьте логотип svg к элементу 'g', который находится внутри вашего элемента svg, например 

<svg id="base" height="100%" width="100%"><g id="logo"></g></svg>

тогда вы можете применить преобразование к этому, а не к svg, например 

var logo = Snap('#logo').append(data)

Вам также необходимо удалить кавычки в строке преобразования. I.e 

var transform_string = "s" + scale_factor + "," + scale_factor;
...