Question

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

如何在脚本中输出SVG'path'元素？下面是当前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')

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

无法获取SVG路径 - Snap.svg

1 个答案: