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

【问题标题】：Snap.svg transform not working - possible issue with element selection?Snap.svg 转换不起作用 - 元素选择可能存在问题？
【发布时间】：2018-10-16 16:40:00
【问题描述】：

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

【问题讨论】：

我认为我们需要minimal reproducible example。什么是img.svg，什么元素有id="id"等
@RobertLongson 我试着做一个小提琴，但由于需要包含我自己的本地文件，以及 fiddle.js 没有内置 Snap.svg 的事实而挣扎。我尝试导入它，但它拒绝了。无论如何，我已经为应该澄清事情的问题添加了更多细节！
您可以将 img.svg 制作成数据 url，这样它就不会是本地文件。您可以在 Stack Snippets 中包含其他 javascript。

标签： javascript svg snap.svg

【解决方案1】：

我认为您的问题是这一行，但如果没有在测试示例中看到它，我无法确定...

var logo = s.append(data);

如果您查看文档here，它会说它返回父元素。所以你说'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)

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

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

【讨论】：

SVG 2 中的 svg 元素支持转换。Firefox 支持 SVG 2 的这一部分。
我添加了一个 sn-p - 我确实尝试了你的建议，但它没有工作 - 它找不到 do ` var logo = Snap('#logo').append( data)`，因为它声称 Snap('#logo') 为空。
也去掉多余的引号，所以使用 var transform_string = "s" + scale_factor + "," + scale_factor;