Разработка плагинов Sketch: экспорт символа в виде текста SVG

Question

У меня есть рабочий пример экспорта выбранного символа в строку SVG в Sketch 3. (На основе этого кода из GitHub Sketch)

Проблема в том, что выходные данные искажены, и я не вижу следующего логического шага в устранении неполадок.

Код

// Get all symbols
var symbols = context.document.documentData().allSymbols();

// For purpose of this example, only get the first one for testing.
var symbol = symbols[0];

// Set a temporary file to save to. Necessary for generating the SVG
var tempPath = '/tmp/com.symbolui.sketch-commands/';
var guid = [[NSProcessInfo processInfo] globallyUniqueString];
var path = tempPath + guid;
[[NSFileManager defaultManager] createDirectoryAtPath:path withIntermediateDirectories:true attributes:nil error:nil]

var export_path = path;
var export_filename = export_path + '/' + 'test.svg';

// do export
[doc saveArtboardOrSlice:frame toFile:export_filename];
var file_url = [NSURL fileURLWithPath:export_filename];
var str = [[NSString alloc] initWithContentsOfURL:file_url];

В последней точке кода, str является текстовым значением SVG, сгенерированным из символа.

Выход

Входной символ:

Сгенерированный предварительный просмотр SVG:

Сгенерированный текст SVG:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="1200px" height="65px" viewBox="0 0 1200 65" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
<title></title>
<desc>Created with Sketch.</desc>
<defs>
    <rect id="path-1" x="0" y="0" width="49" height="20" rx="3"></rect>
    <mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="49" height="20" fill="white">
        <use xlink:href="#path-1"></use>
    </mask>
</defs>
<g id="Symbols:-Labels" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <g id="Buttons" transform="translate(-422.000000, 31.000000)"></g>
    <g id="Label-/-Default" transform="translate(670.000000, 60.000000)">
        <use id="background" stroke="#979797" mask="url(#mask-2)" stroke-width="2" fill="#777777" xlink:href="#path-1"></use>
        <text id="-Default" font-family="HelveticaNeue-Bold, Helvetica Neue" font-size="10" font-weight="bold" fill="#FFFFFF">
            <tspan x="7" y="14">Default</tspan>
        </text>
    </g>
</g>

мысли

Как вы можете видеть, результат довольно велик, в дополнение к искажению. По крайней мере, я считаю, что мне нужно как-то урезать или изменить масштаб символа. Откуда исходит искажение, я понятия не имею.

Исправление самой разметки SVG не является решением - я хотел бы увидеть решение в коде плагина Sketch. Я нахожу документацию по внутреннему коду Sketch очень трудной для работы и была большим препятствием для решения этой проблемы.

Answer 1

Вы можете конвертировать MSSymbolInstance в обычную группу, затем экспортируйте ее.

if (layer.symbolMaster().children().count() > 1) {
    var tempSymbol = layer.duplicate(),
    tempGroup = tempSymbol.detachByReplacingWithGroup();

    tempGroup.resizeToFitChildrenWithOption(0);
    layer.setIsVisible(false);

    tempGroup.exportOptions().removeAllExportFormats();
    var format = tempGroup.exportOptions().addExportFormat();
    format.setFileFormat("SVG");

    var slice = MSExportRequest.exportRequestsFromExportableLayer(tempGroup).firstObject();
    var filePath = export_path + '/test.svg';
    doc.saveArtboardOrSlice_toFile(slice, filePath);
 }