Question

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

Answer 1

我认为你的问题就是这一行，但我不确定如果没有在测试例中看到它...

var logo = s.append(data);

如果查看文档here，它会返回父元素。所以你要说＆＃39; logo = svg元素＆＃39;。

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

所以你要么选择例如＆＃39; g＆＃39;通过选择svg徽标中的元素（例如s.select（＆＃39; #logo＆＃39;）或Snap（＆＃39; #logo＆＃39;），但我们还没有看到，知道是否它存在），或将svg徽标附加到＆＃39; g＆＃39; svg元素中的元素，例如

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

然后你可以将变换应用于那个，而不是svg，例如

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

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

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

Snap.svg转换不起作用 - 元素选择可能出现问题？

1 个答案: