SnapSVG - 解析 toDefs() 不是函数答案

【问题标题】：SnapSVG - parse toDefs() is not a functionSnapSVG - 解析 toDefs() 不是函数
【发布时间】：2015-08-06 03:12:46
【问题描述】：

我，我正在尝试使用 snapsvg 将字体引用嵌入到 svg 部分。这是我的sn-p

this.importFonts = function() {
    var fonts = [
        {
            name : 'Oswald',
            family : 'Oswald',
            url : 'http://fonts.googleapis.com/css?family=Oswald'
        }
    ];
    fonts.forEach(function(font){
        var snapFont = Snap.parse('<style type="text/css">@import url(' + font.url + ');</style>');
        canvas.append(snapFont);
        snapFont.toDefs();
    });
};

样式标签被附加到 svg 但我收到一个错误

Uncaught TypeError: snapFont.toDefs is not a function

任何人都可以在这里看到我哪里出错了。

问候

【问题讨论】：

好的，控制台记录snapFont 揭示了答案类型。如何将片段转换为 snapsvg 元素？

标签： svg snap.svg

【解决方案1】：

找到答案了，通过snapsvg选择元素会返回一个snapelement：

this.importFonts = function() {
    var fonts = [
        {
            name : 'Oswald',
            family : 'Oswald',
            url : 'http://fonts.googleapis.com/css?family=Oswald'
        }
    ];
    var fontGroup = canvas.g();
    fonts.forEach(function(font){
        var snapFont = Snap.parse('<style type="text/css">@import url(' + font.url + ');</style>');
        fontGroup.add(snapFont);
    });
    fontGroup.selectAll('style').forEach(function(elm){
        elm.toDefs();
    });
    fontGroup.remove();
};

【讨论】：