Sketch 插件开发：将符号导出为 SVG 文本答案

【问题标题】：Sketch Plugin Development: Export Symbol as SVG TextSketch 插件开发：将符号导出为 SVG 文本
【发布时间】：2017-01-31 18:09:18
【问题描述】：

我有一个在 Sketch 3 中将选定符号导出为 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 插件代码中看到解决方案。我发现内部 Sketch 代码的文档很难使用，并且一直是解决这个问题的主要障碍。

【问题讨论】：

以防万一其他人好奇.. 我在 SVG 生成上投入了无数小时，但出现了太多错误/不一致。我最终将临时资产导出为 PNG 图像，这对于我的用例来说已经足够好了。我只需要预览图片。

标签： sketch-3 sketchapp cocoa-scripting cocoascript

【解决方案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);
 }

【讨论】：