0

我有一个要求，我想将 SVG 路径转换为 ​​2 条路径。这两条路径一起应该等同于原始路径。我有一些代码可以做到这一点。但输出并不准确。我想我不知道路径命令如何工作的一些基本概念。

为我想要转换的原始路径小提琴： https ://jsfiddle.net/q4r8zcqp/4/

<svg width=1000 height=1000>
  <path id='originalPath' style="fill: #000 !important; stroke: none!important; stroke-width: 2px;" d="M440 840 l-1 0 0 -57 0 -57 -4 0 -3 -1 -6 0 -5 0 0 -5 0 -6 7 0 6 0 0 -33 0 -34 -47 0 -48 0 0 -2 0 -2 1 -10 2 -9 3 -8 2 -8 4 -8 4 -7 6 -8 5 -7 6 -6 7 -5 6 -5 7 -4 7 -4 8 -3 7 -2 8 -2 6 -1 6 -1 0 -96 1 -95 17 0 18 0 0 -7 1 -6 3 -9 2 -8 5 -10 5 -10 6 -7 7 -8 5 -5 6 -5 7 -5 7 -4 5 -2 5 -2 6 -3 7 -2 11 -2 11 -1 1 0 2 1 0 47 0 47 12 0 11 0 0 -6 0 -7 5 0 6 0 0 10 1 10 0 176 0 177 62 0 62 0 54 1 55 0 0 6 0 5 -36 0 -37 0 0 57 0 58 -6 0 -6 0 -1 -10 0 -9 -76 0 -76 0 0 10 0 10 -81 0 -81 0 0 -1z m80 -11 l0 -8 -39 -1 -39 0 0 9 0 9 39 0 39 0 0 -9z m79 0 l0 -9 -39 0 -38 1 -1 8 0 9 39 0 39 0 0 -9z m0 -56 l0 -47 -78 0 -79 0 0 47 0 46 79 0 78 0 0 -46z m155 -1 l0 -46 -76 0 -76 0 0 46 0 46 76 0 76 0 0 -46z m-271 -62 l-3 -3 -1 -5 0 -6 0 -13 1 -13 1 -3 2 -3 3 -1 2 -1 33 0 32 0 2 1 3 1 2 3 1 3 1 13 0 13 0 6 -1 5 -3 3 -2 3 19 0 19 0 0 -114 0 -114 -18 0 -17 1 -1 12 0 13 -8 0 -7 0 0 0 0 1 2 4 2 4 1 6 1 7 -1 6 -1 6 -2 5 -3 6 -2 3 -3 3 -5 2 -5 3 -5 0 -4 0 -5 -2 -4 -2 -4 -5 -5 -5 -2 -7 -2 -7 0 -9 1 -8 2 -5 2 -5 0 -1 0 0 -7 0 -8 0 0 -13 0 -13 -19 0 -20 0 0 30 0 30 -3 0 -3 0 0 1 0 1 -7 0 -7 1 -7 2 -7 1 -8 3 -7 3 -7 4 -7 4 -7 6 -6 6 -6 6 -6 7 -4 7 -4 7 -2 6 -3 7 -2 6 -1 6 -1 5 0 6 50 0 50 0 0 3 0 4 2 0 3 1 0 32 0 33 19 0 19 0 -2 -3z m73 -1 l3 -2 0 -19 0 -19 -2 -3 -3 -2 -33 0 -34 0 -3 2 -2 3 0 19 0 19 3 2 3 3 33 0 32 0 3 -3z m-117 -65 l0 -2 -48 0 -49 0 0 2 0 1 49 0 48 0 0 -1z m94 -82 l4 -3 3 -4 3 -4 2 -6 1 -5 0 -8 0 -7 -1 -5 -2 -4 -2 -3 -1 -2 -18 0 -18 0 -3 6 -2 6 0 10 0 11 2 5 3 6 4 3 3 4 3 2 4 1 5 0 6 -1 4 -2z m23 -64 l0 -11 -34 0 -34 0 0 11 0 11 34 0 34 0 0 -11z m38 -78 l0 -54 -11 0 -11 0 0 -2 0 -3 -4 0 -4 0 0 -50 0 -50 -6 0 -6 1 -7 2 -7 2 -10 5 -10 5 -9 6 -8 7 -4 5 -5 6 -4 6 -4 6 -4 7 -3 8 -2 7 -2 8 -1 8 0 9 -2 1 -1 0 0 3 0 3 -11 0 -11 0 0 54 0 54 74 0 73 0 0 -54z m-25 -110 l0 -49 -1 0 -2 0 0 49 0 48 2 0 1 0 0 -48z"></path>
</svg>

小提琴我使用我的算法创建了 2 条路径：https ://jsfiddle.net/9fh3rxs7/4/

<svg width=1000 height=1000>
  <path id='updatedPath' style="fill: #000 !important; stroke: none!important; stroke-width: 2px;" d="M 440 840  l -1 0  0 -57  0 -57  -4 0  -3 -1  -6 0  -5 0  0 -5  0 -6  7 0  6 0  0 -33  0 -34  -47 0  -48 0  0 -2  0 -2  1 -10  2 -9  3 -8  2 -8  4 -8  4 -7  6 -8  5 -7  6 -6  7 -5  6 -5  7 -4  7 -4 m 8 -3  l 7 -2  8 -2  6 -1  6 -1  0 -96  1 -95  17 0  18 0  0 -7  1 -6  3 -9  2 -8  5 -10  5 -10  6 -7  7 -8  5 -5  6 -5  7 -5  7 -4  5 -2  5 -2  6 -3  7 -2  11 -2  11 -1  1 0  2 1  0 47  0 47  12 0  11 0  0 -6  0 -7  5 0  6 0  0 10  1 10  0 176  0 177  62 0  62 0  54 1  55 0  0 6  0 5  -36 0  -37 0  0 57  0 58  -6 0  -6 0  -1 -10  0 -9  -76 0  -76 0  0 10  0 10  -81 0  -81 0  0 -1  L440 840 M 520 829 l  0 -8  -39 -1  -39 0  0 9  0 9  39 0  39 0  0 -9 Z m 79 0 l  0 -9  -39 0  -38 1  -1 8  0 9  39 0  39 0  0 -9 Z m 0 -56  l 0 -47  -78 0  -79 0  0 47  0 46  79 0  78 0  0 -46 Z m 155 -1 l  0 -46  -76 0  -76 0  0 46  0 46  76 0  76 0  0 -46 Z m -271 -62  l -3 -3  -1 -5  0 -6  0 -13  1 -13  1 -3  2 -3  3 -1  2 -1  33 0  32 0  2 1  3 1  2 3  1 3  1 13  0 13  0 6  -1 5  -3 3  -2 3  19 0  19 0  0 -114  0 -114  -18 0  -17 1  -1 12  0 13  -8 0  -7 0  0 0  0 1  2 4  2 4  1 6  1 7  -1 6  -1 6  -2 5  -3 6  -2 3  -3 3  -5 2  -5 3  -5 0  -4 0  -5 -2  -4 -2  -4 -5  -5 -5  -2 -7  -2 -7  0 -9  1 -8  2 -5  2 -5  0 -1  0 0  -7 0  -8 0  0 -13  0 -13  -19 0  -20 0  0 30  0 30  -3 0  -3 0  0 1  0 1  -7 0  -7 1  -7 2  -7 1  -8 3  -7 3  -7 4  -7 4  -7 6  -6 6  -6 6  -6 7  -4 7  -4 7  -2 6  -3 7  -2 6  -1 6  -1 5   0 6   50 0   50 0   0 3   0 4   2 0   3 1   0 32   0 33   19 0   19 0   -2 -3 Z m 73 -1  l 3 -2   0 -19   0 -19   -2 -3   -3 -2   -33 0   -34 0   -3 2   -2 3   0 19   0 19   3 2   3 3   33 0   32 0   3 -3 Z m -117 -65 l  0 -2   -48 0   -49 0   0 2   0 1   49 0   48 0   0 -1 Z m 94 -82 l  4 -3   3 -4   3 -4   2 -6   1 -5   0 -8   0 -7   -1 -5   -2 -4   -2 -3   -1 -2   -18 0   -18 0   -3 6   -2 6   0 10   0 11   2 5   3 6   4 3   3 4   3 2   4 1   5 0   6 -1   4 -2 Z m 23 -64 l  0 -11   -34 0   -34 0   0 11   0 11   34 0   34 0   0 -11 Z m 38 -78 l  0 -54   -11 0   -11 0   0 -2   0 -3   -4 0   -4 0   0 -50   0 -50   -6 0   -6 1   -7 2   -7 2   -10 5   -10 5   -9 6   -8 7   -4 5   -5 6   -4 6   -4 6   -4 7   -3 8   -2 7   -2 8   -1 8   0 9   -2 1   -1 0   0 3   0 3   -11 0   -11 0   0 54   0 54   74 0   73 0   0 -54 Z m -25 -110  l 0 -49   -1 0   -2 0   0 49   0 48   2 0   1 0   0 -48 Z"></path>
  <path style="fill: #000 !important; stroke: none!important; stroke-width: 2px;" d="M 399 554 l 8 -3 Z"></path>
</svg>

因此，如果您检查小提琴，则在第二小提琴中可以看到一条额外的线，但我没有得到它的原因。

显示那条额外线的原因是什么？关于这两种路径或任何实现方式的区别有什么帮助？谢谢

4

1 回答 1

0

在转换中遇到了问题。实际上这不是问题。在样式中，我已经给出fill: #000 !important;了由于新m命令造成的间隙被这种填充颜色填充。如果我删除此填充并仅添加 stroke ，则两条路径看起来相似。谢谢。

于 2016-02-02T06:10:51.880 回答