Блог

Я экспериментирую с Snap, чтобы использовать svg, и мне нужно иметь возможность использовать значки Maki, определенные в https://github.com/mapbox/maki .

Мой план состоит в том, чтобы загрузить нужные мне svg, а затем создать их для определенных значков на листе бумаги Snap. Но для того, чтобы это работало, мне нужно поместить значок в определенное место на бумаге, но я не могу заставить перевод работать. Ни один из приведенных ниже методов перевода не работает; код работает как есть, но значок всегда помещается в верхнем левом углу.

Чего мне не хватает? Документации по Snap недостаточно, и я не знаю, связана ли проблема с тем, как определяется значок Маки 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 в Snap это просто фрагмент.

Итак, вам нужно будет сделать что-то вроде…

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

Спасибо! Это сделало свое дело! И поскольку 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);
    });