时间戳

首页 > 解决方案 > Snap.svg 转换不起作用 - 元素选择可能存在问题？

javascript - Snap.svg 转换不起作用 - 元素选择可能存在问题？

问题描述

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)什么也不做。

标签： javascriptsvgsnap.svg

解决方案

我认为你的问题是这条线，但我不能确定没有在测试示例中看到它......

var logo = s.append(data);

如果您查看此处的文档，它会说它返回父元素。所以你说'logo = svg 元素'。

svg 元素不允许转换（在某些浏览器中，请参阅下面的 Roberts 评论）。

因此，您要么想通过选择它来选择 svg 徽标中的“g”元素（例如 s.select('#logo') 或 Snap('#logo')，但我们还没有看到它知道是否它存在），或将 svg 徽标附加到 svg 元素内的“g”元素，例如

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

然后你可以应用转换，而不是 svg，例如

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

您还需要删除转换字符串中的引号。IE

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

推荐阅读