如何在sketch应用程序中绘制圆环图，生成正确的SVG代码

我对sketch应用程序生成甜甜圈图表的方式没有什么问题

这就是我在Sketch应用程序中构建圆环图的方式

请参考下面的屏幕截图

我创建了一个200px x 200px的圆

空的填充物。冲程25（中心位置）。这将是空的状态圈，所以我把它涂成灰色

我复制了这个基本圆，创建了我的第一段50%（共3段，50%，25%，25%）

对于我的第一段50%，短跑的长度是314。破折号似乎是从6点钟位置开始绘制的，并以逆时针方向移动（这在其他段中更为明显）。然而，我更喜欢从12英尺开始 ，并沿顺时针方向移动

复制圆以创建25%的第二段，这相当于157的“破折号”和471的“间隙”

由于圆笔划是如何绘制的（见第4点），我应用了90度的变换

对于最后一段，与第二段类似，只是变换180度

生成的SVG不表示在草图中绘制的内容 问题:

• 如何确保结束SVG的外观与Sketch app中的设计一致
• 在草图中，如何确保笔划从12点钟位置开始（我猜是变换？）并顺时针绘制

通过草图（）生成的代码

油炸圈饼图
用草图创建。

SVG中

的破折号模式始终从3点钟位置开始。从您的示例来看，Sketch似乎认为它从12点钟的位置开始-至少对于黄色的位置。我不明白为什么第二个和第三个似乎在3点开始

要使它在SVG中看起来正确，需要将黄色的旋转-90度。这将使它从3点“向后”旋转到12点

油炸圈饼图
用草图创建。

SVG中

的破折号模式始终从3点钟位置开始。从您的示例来看，Sketch似乎认为它从12点钟的位置开始-至少对于黄色的位置。我不明白为什么第二个和第三个似乎在3点开始

要使它在SVG中看起来正确，需要将黄色的旋转-90度。这将使它从3点“向后”旋转到12点

油炸圈饼图
用草图创建。

我建议有两种方法来构建它，并且都不依赖于旋转变换。变换（特别是从设计工具和其他属性（如笔划数组或遮罩）一起导出时）可能会导致问题

方法1： 如果这是一个不需要更改的静态图形，您可以在草图中采用以下方法：

•创建3个相同的圆形图层，带有黄色、绿色和蓝色边框。
•对于每个圆，使用剪刀工具从圆中删除线段。*例如，对于蓝色层，您可以使用剪刀工具删除除一条线段以外的所有线段。我还写了一篇关于。
•请注意，此方法不使用旋转变换。从草图到SVG，它应该可以轻松、相同地导出。

*直线段是任意两个矢量点之间的路径，因此，如果希望圆的一部分在尚未存在矢量点的任意点（例如：4点钟）处结束，则可以进入编辑模式并沿路径单击以在该点处添加矢量点。

方法2： 如果这是一个基于真实数据（如饼图）变化的动态图形，则划短划线是一个好主意，但我建议直接在SVG中进行一些工作：

•从草图开始，创建相同的圆层（仅一个）。
•这种使用笔划破折号的方式在很大程度上依赖于1。圆的起点，以及2。圆的路径方向。我们可以通过在圆上输入编辑模式（

return

key）在草图中计算出这些值；选定的矢量点是起点，点击

选项卡

键将循环通过沿路径方向移动的其他点。根据草图对圆的默认设置，我们需要进行以下调整，以获得从12点钟开始顺时针移动的圆：
•将圆旋转180°，然后单击工具栏中的展平（或在菜单栏中，通过图层>组合>展平）。除了删除旋转变换外，这还会将其转换为自定义路径，而不是标准圆。它将作为

元素而不是

导出到SVG。
•路径方向当前为逆时针方向，因此如果您希望其为顺时针方向，还应转到图层>路径>反转顺序以切换路径方向。现在我们有了一个圆路径，在SVG中不需要旋转。

•导出到SVG后，我建议将代码复制到代码笔中，就像我所做的那样。首先，将

元素移动到

区域，以便可以轻松地为每个彩色片段克隆它。
•创建3个引用

的元素，每个元素都有自己的笔划颜色。如果您不熟悉如何执行此操作，请查看我的代码笔链接。
•为每个

元素添加一个

笔划dasharray

属性。它们应该有两个值：1。要创建的线段的长度，以及2。长度

<?xml version="1.0" encoding="UTF-8"?>
<svg width="226px" height="226px" viewBox="0 0 226 226" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 45.2 (43514) - http://www.bohemiancoding.com/sketch -->
    <title>donut-chart</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="iPad" transform="translate(-236.000000, -213.000000)" stroke-width="25">
            <g id="donut-chart" transform="translate(249.000000, 226.000000)">
                <circle id="base" stroke="#D8D8D8" cx="100" cy="100" r="100"></circle>
                <circle id="segment1" stroke="#FFD900" stroke-dasharray="314,314" cx="100" cy="100" r="100"></circle>
                <circle id="segment2" stroke="#64B445" stroke-dasharray="157,471" transform="translate(100.000000, 100.000000) rotate(90.000000) translate(-100.000000, -100.000000) " cx="100" cy="100" r="100"></circle>
                <circle id="segment3" stroke="#004FB6" stroke-dasharray="157,471" transform="translate(100.000000, 100.000000) rotate(180.000000) translate(-100.000000, -100.000000) " cx="100" cy="100" r="100"></circle>
            </g>
        </g>
    </g>
</svg>