Question

草图应用程序生成圆环图的方式我几乎没有问题。

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

请参阅屏幕截图以关注

我创建了一个200px乘200px的圆圈
空填充。中风25（中心位置）。这将是空状态圈，因此我将其颜色为灰色
我复制了这个基础圈，创造了50％的第一段（总共3个，50％，25％，25％）
对于我的第一段50％，“Dash”的长度为314.看起来短划线从6点钟位置绘制并沿逆时针方向移动（这在其他段中会更明显））。但是，我更喜欢它从12'开始时钟，顺时针方向移动。
复制圆圈以创建25％的第二段，相当于157的“Dash”和471的“Gap”。
由于绘制圆形笔划的方式（参见第4点），我应用了90deg的转换
对于最后一段，与第二段类似，唯一的例外是转换180deg
生成的SVG不代表Sketch中绘制的内容问题：
- 如何确保最终SVG看起来像Sketch应用程序中的设计
- 在草图中，如何确保笔划从12点位置开始（我猜是转换？）并顺时针绘制。

通过草图生成代码（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>

Answer 1

我建议使用两种方法来构建它，而不是依赖于旋转变换。变换（特别是从设计工具中导出以及其他属性，如stroke-dasharray或mask）可能会导致问题。

方法1：

如果这是一个不需要更改的静态图形，您可以在Sketch中使用此方法：

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

* 线段是任意两个矢量点之间的路径，所以如果你想让圆的一部分在一个任意点（例如：4点钟）结束，那里还没有矢量点，您可以进入编辑模式，然后沿路径单击以在那里添加矢量点。

方法2：

如果这是一个基于真实数据（如饼图）而变化的动态图形，那么笔划破折号是一个好主意，但我建议直接在SVG：

•通过创建相同的圆形图层（仅一个）开始草图。
•这种使用笔划破折号的方式在很大程度上取决于1.圆的起点，以及2.圆的路径方向。我们可以通过在圆圈（return键）上输入编辑模式来计算草图中的内容;选定的矢量点是起始点，点击tab键将循环通过沿路径方向移动的其他点。根据Sketch的圆形默认值，我们需要进行以下调整，以获得一个从12点开始并顺时针移动的圆圈：
•将圆旋转180°，然后单击工具栏中的展平（或在菜单栏中，通过图层＆gt;合并＆gt;展平）。除了删除旋转变换之外，还会将其转换为自定义路径而不是标准圆。它将作为<path>元素而不是<circle>导出到SVG。
•路径方向目前是逆时针方向，因此如果您希望它是顺时针方向，您还应该转到图层＆gt;路径＆gt;反向顺序切换路径方向。现在我们有了我们想要的圆形路径 - 在SVG中不需要旋转。

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

Woohoo-dynamic charts！

Answer 2

SVG中<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>

我对素描的东西没有解释。

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

2 个答案:

方法1：

方法2：