Sketch插件开发:将符号导出为SVG文本

Question

在Sketch3中，我有一个将选定的符号导出为SVG字符串的工作示例。(基于Sketch的GitHub中的this code )

问题是输出失真了，我看不到故障排除的下一个逻辑步骤。

《守则》

// 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插件代码中看到解决方案。我发现内部草图代码的文档非常难以使用，并且一直是解决这个问题的主要障碍。

Answer 1

可以将MSSymbolInstance转换为normal组，然后将其导出。

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