如何在 Snap.svg 中使用 Maki svg 图标？答案

【问题标题】：How to use Maki svg icons with Snap.svg?如何在 Snap.svg 中使用 Maki svg 图标？
【发布时间】：2014-07-07 23:32:58
【问题描述】：

我正在尝试使用 Snap 以使用 svg，并且需要能够使用在 https://github.com/mapbox/maki 中定义的 Maki 图标。

我的计划是加载我需要的 svg，然后在一张 Snap 纸上为特定图标实例化它们。但是为了使它起作用，我需要将图标放在纸上的特定位置，但我无法翻译工作。以下任何一种翻译技术都不起作用；代码按原样工作，但始终将图标放在左上角。

我错过了什么？没有足够的关于 Snap 的文档，我不知道问题出在 Maki 图标 svg 的定义方式上，还是我对 Snap 的使用上。

    var icon = Snap.load("maki/bicycle-24.svg", function(f) {

        var g = f.select("g").clone();
        // var g = f.select("#layer1").clone(); // also works

        // g.transform("t120,120");

        // var t = new Snap.Matrix();
        // t.translate(120,120);
        // g.transform(t);
        paper.append(g);
    });

【问题讨论】：

标签： svg icons snap.svg

【解决方案1】：

克隆需要在追加之后进行，就像在 Snap 中加载 svg 时它只是一个片段。

所以你需要做类似...

paper.append(f);
var element = paper.select('#someId').clone();
element.transform( myTransform );

【讨论】：

【解决方案2】：

谢谢！那成功了！而且由于 Snap 的文档记录很差，我将在此处插入允许通用解决方案的代码。

        // Base set from which markers are constructed
    var iconSet = paper.group();
    iconSet.attr({ class: 'hide' });

        // Instantiations of icons
    var markers = paper.g();

        // Now, create SVG shape
    var icon = Snap.load("maki/bicycle-24.svg", function(icon) {
            // Add it to the icon set
        iconSet.append(icon);

            // Instantiate it and remove from main view
        var element = paper.select('#svg4460');                 // Copies it!
        // var element = paper.select('#base');                // Selects something but doesn't work
        // var element = paper.select('#layer1');              // Selects something but doesn't work
        // var element = paper.select('#bicycle-24');          // Silent fail
        element = element.clone();
        element.remove();

            // Clone this icon and move it
        var t = new Snap.Matrix();
        t.translate(10,120);
        element.transform(t);

            // Insert into main document view (markers)
        markers.add(element);
    });

【讨论】：