修改 SVG.js 创建的父 SVG 的高度

Question

我在 WordPress 插件上使用 SVG.js，到目前为止一切正常，除了一点点。我正在加载一个正在加载的外部 SVG。动画正在运行，但当它弹到顶部时，它会被切断。

然后我注意到有另一个 SVG 容器在上一层创建，在该父 SVG 内部是我加载的 SVG。我似乎无法将该父级编辑为具有默认 300 像素之外的宽度和高度。我在 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);


    	 });

Answer 1

我将首先解释您的代码实际在做什么。

1. 您正在启动一个 最终设置变量的 ajax 请求（这有点重要）。

2. 然后通过调用SVG() 创建一个<svg> 并将其添加到ID 为svg_foo_id 的元素中。这个元素应该是<div> 或类似元素（如果它是<svg> 元素，你就已经错了。你没有发布任何html代码，所以我需要猜测。

3. 接下来您在已创建的 SVG 中创建一个组。

4. 在 THIS 组中，您将加载的 ajax 请求内容 BUT 甚至还没有加载。

此时我想知道，为什么它会显示任何内容，因为svg_local_load 仍应为undefined，因为 ajax 请求尚未完成并且无法设置变量。
建议： 将所有代码放入 ajax 请求的 success 回调中，或从那里调用创建 svg 的函数。

既然你说，这部分已经有效，我假设你发布的代码不是你在实际程序中使用的代码。

回到您的问题：您从未设置一开始创建的 svg 的 size()。你可以通过draw.size(1000, 1000) 做到这一点。如果有一个<svg> 高于那个级别，请参阅第 2 点