0

我有一个将选定符号导出到 Sketch 3 中的 SVG 字符串的工作示例。（基于Sketch 的 GitHub中的此代码）

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

编码

// 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 代码的文档很难使用，并且一直是解决这个问题的主要障碍。

4

1 回答 1

0

您可以将其转换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);
 }
于 2017-06-26T04:55:36.953 回答