Question

我正在尝试使用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);
    });

Answer 1

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

所以你需要做一些像......

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

Answer 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);
    });

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

2 个答案: