1

我对草图应用程序生成甜甜圈图的方式几乎没有问题。

这就是在 Sketch 应用程序中构建甜甜圈图的方式

请参考截图跟随要关注的屏幕截图

  1. 我创建了一个 200 像素 x 200 像素的圆圈
  2. 空填充。行程 25（中心位置）。这将是空状态圈，所以我将其着色为灰色
  3. 我已经复制了这个基圆来创建我的第一个 50% 段（总共 3 个，50%、25%、25%）
  4. 对于我的第一个 50% 段，“破折号”的长度为 314。似乎破折号是从 6 点钟位置绘制的，并沿逆时针方向移动（这在其他段中会更明显）。但是，我更喜欢它从 12 点开始并顺时针方向移动。
  5. 复制圆圈以创建 25% 的第二段，这等于 157 的“Dash”和 471 的“Gap”。
  6. 由于画圆的方式（见第 4 点），我应用了 90 度的变换
  7. 最后一段，和第二段类似，只是变换了180度

  8. 生成的 SVG 不代表 Sketch Questions 中绘制的内容：

    • 如何确保最终的 SVG 看起来像 Sketch 应用程序中设计的那样
    • 在草图中，如何确保笔画从 12 点钟位置开始（我猜是变形？）并顺时针绘制。

Sketch 生成的代码 ( https://jsfiddle.net/BrightPixels/932w6j9d/ )

<?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>
4

2 回答 2

4

我建议有两种方法来构建它，并且都不依赖于旋转变换。变换（尤其是从设计工具中与其他属性（如 stroke-dasharray 或遮罩）一起导出时）可能会导致问题。

方法一：

如果这是一个不需要更改 的静态图形

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

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

方法二：

如果这是一个基于真实数据（如饼图）而变化 的动态图形

，笔划破折号是个好主意，但我建议直接在 SVG 中做一些工作： • 从 Sketch 开始，创建相同的圈层（只有一个）。
• 这种使用划线的方式很大程度上依赖于 1. 圆的起点，以及 2. 圆的路径方向。return我们可以通过在圆圈（键）上进入编辑模式来在 Sketch 中找出这些；选定的矢量点是起点，按该tab键将循环通过沿路径方向移动的其他点。根据 Sketch 对圆的默认设置，我们需要进行以下调整以得到一个从 12 点开始并顺时针移动的圆：
• 将圆旋转180°，然后单击工具栏中的展平（或在菜单栏中，通过图层> 组合> 展平）。除了删除旋转变换之外，这会将其变成自定义路径而不是标准圆。它将作为<path>元素而不是<circle>.
• 当前路径方向是逆时针方向，因此如果您希望它是顺时针方向，您还应该转到图层 > 路径 > 逆序来切换路径方向。现在我们有了我们想要的圆路径——不需要在 SVG 中进行旋转。

• 导出为 SVG 后，我建议将代码复制到 CodePen 中，正如我在此演示中所做的那样。首先，将<path>元素移动到<defs>区域，以便您可以轻松地为每个彩色段克隆它。
• 创建 3 个<use>引用 的元素<path>，每个元素都有自己的笔触颜色。如果您不熟悉如何执行此操作，请参阅我的 CodePen 链接。 •为每个元素
添加一个属性。它们应该有 2 个值：1. 您要创建的线段的长度，以及 2. 破折号之间的间隙长度——应该等于或大于路径本身的长度。在这种情况下，路径长度约为 628，可以使用我包含在该 CodePen 中的一点点 Javascript 来计算（打开控制台查看结果数字）。在这个例子中，绿色和蓝色的圆圈占据了圆圈路径的 1/4，所以它们的 a 应该是。 stroke-dasharray<use>stroke-dasharray157, 628
• 因为这些破折号都从路径的开头开始，所以我们需要对它们进行偏移。我们不需要为此使用旋转变换——相反，我建议使用stroke-dashoffset正是出于这个原因而创建的。偏移量采用一个数值：它将虚线沿与路径相反的方向移动的距离。这意味着我们需要使用负值以与路径相同的方向移动。要将绿色段偏移圆的一半，该属性应该是stroke-dashoffset="-314"。
• 这种方法的好处是您可以轻松地使用Javascript 或CSS calc() 轻松设置这些彩色段的stroke-dasharray和stroke-dashoffset值，并根据新数据更新它们。

哇——动态图表！

于 2017-08-02T20:10:18.097 回答
0

SVG中 a 的虚线图案<circle>总是从 3 点钟位置开始。从您的示例中，Sketch 似乎认为它从 12 点钟位置开始 - 至少对于黄色的位置。我很困惑为什么第二个和第三个似乎从 3 点开始。

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

<?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" transform="translate(100, 100) rotate(-90) translate(-100, -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>

不过，我对 Sketch 的东西没有解释。

于 2017-08-02T14:06:40.470 回答