javascript - 无法获取 SVG 路径 - Snap.svg

Question

在当前的 init 函数中，我使用 Snap.load 加载 SVG，然后尝试获取该 SVG 的子“路径”元素；但是，路径函数运行时在控制台中输出“0”和“0”。已设置超时功能，但似乎仍然无法识别任何“路径”元素。

如何在脚本中获取要输出的 SVG“路径”元素？下面是当前 html 和脚本的示例。

HTML

在加载 SVG 资源之前:

<div class="icon-svg-morph" id="icon-svg">
    <svg class="animate-object icon-svg"></svg>
</div>

加载 SVG 资源后:

<div class="icon-svg-morph" id="icon-svg">
    <svg class="animate-object icon-svg" height="150" viewBox="0 0 500 500" width="150">
        <desc>Created with Snap</desc>
        <defs></defs>
        <path
            d="M345,230l-95-95l-95,95l-55,95l150,50l150-50L345,230z M250,334l-54.5-84L141,289
l31-52l78-75l78,75l31,52l-54.5-39L250,334z"
            id="icon-path"
            style="fill: #339ed9;"
        >
    </path>
    </svg>
</div>

JS

$.svgElement.prototype = {
    init: function() {
        var s = Snap('.icon-svg');

        Snap.load('asset/img/icon.svg', function (response) {
            var icon = response;
            s.append(icon);
        });

        s.attr({
            height: 150,
            viewBox: 0 + ' ' + 0 + ' ' + 500 + ' ' + 500,
            width: 150
        });

        this.path();
    },

    path: function() {
        var paths = $('.icon-svg').children('path');

        console.log(paths.length);

        if (! paths.length) {
            setTimeout(function(){
                console.log(paths.length);
            }, 100);

            return;
        }
    }
};

Click to view the current example.

Answer 1

如果您想要路径，我只需使用 Snaps selectAll

s.selectAll('path') or s.select('path') 

如果您只想要一个，则可能需要确保选择可以访问 s。