修改 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

我将从解释您的代码实际执行的操作开始。

您正在启动一个 ajax 请求，该请求最终设置了一个变量（这在某种程度上很重要）。
然后通过调用 SVG() 创建一个 <svg> 并将其添加到 ID 为 svg_foo_id 的元素中。这个元素应该是一个 <div> 或类似的（如果它是一个 <svg> 元素你在这里已经错了。你没有 post 任何 html 代码所以我需要猜测。
下一步在已经创建的SVG中创建一个组。
在 THIS 组中，您将 ajax 请求的已加载内容放入 BUT 此内容尚未加载.

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

既然你说过，这个位已经工作了，我假设，你 posted 的代码不是你在实际程序中使用的代码。

回到你的问题：你从来没有设置你在开始时创建的 svg 的 size()。您可以使用 draw.size(1000, 1000) 来做到这一点。如果有 <svg> 一个级别，请参阅第 2 点

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

Modify the parent SVG's height that SVG.js creates

javascript

jquery

wordpress

svg.js