SVG路径不填充

发布于 2025-02-09 10:43:43 字数 1645 浏览 1 评论 0原文

我创建了一个将DXF转换为SVG的函数。我们与Maker.js合作以进行链接和删除重复项，但这并不总是有效。因此，我们继续进行自定义。

结果SVG在下面，当它们足够接近时，我们将X/y组合在单个路径中，因此创建图层路径。

该路径在某些情况下无法正确填充，例如以下一条。我们应该在路径上寻找完全填充路径层的路径？

<svg width="112mm" height="94mm" viewBox="2313.0507 -1099.573 112 94" version="1.1" xmlns="http://www.w3.org/2000/svg" style="stroke-linecap:round;stroke-linejoin:round;fill-rule:evenodd;  stroke: #000;stroke-width: 1.5px;"><g id="importedPart" transform="scale(1,-1)" fill-rule="evenodd" style="stroke-linecap:round;stroke-linejoin:round;fill:#c0c0c0;fill-rule:evenodd;"><path d="M2425.0507,1075.7029 L2425.0507,1029.4431 M2425.0507,1075.7029 A10,10 0 0,1 2417.8574,1085.301M2371.8574,1099.1711 L2417.8574,1085.301 M2371.8574,1099.1711 A10,10 0 0,1 2366.2441,1099.1711M2366.2441,1099.1711 L2320.2441,1085.301 M2320.2441,1085.301 A10,10 0 0,1 2313.0507,1075.7029M2313.0507,1029.4431 L2313.0507,1075.7029 M2313.0507,1029.4431 A10,10 0 0,1 2320.2441,1019.8451M2366.2441,1005.975 L2320.2441,1019.8451 M2366.2441,1005.975 A10,10 0 0,1 2371.8574,1005.975M2371.8574,1005.975 L2417.8574,1019.8451 M2417.8574,1019.8451 A10,10 0 0,1 2425.0507,1029.4431" id="4bcf575e-280a-415e-a59c-d62ff0dc0a80"></path><circle cx="2329.360729224585" cy="1070.833023906307" r="8.5" style="stroke-linecap:round;stroke-linejoin:round;fill:#FFF;fill-rule:odd-even;"></circle><circle cx="2408.740729224585" cy="1034.313023906308" r="8.5" style="stroke-linecap:round;stroke-linejoin:round;fill:#FFF;fill-rule:odd-even;"></circle></g></svg>

原文

I have created a function that converts dxf to svg. We where working with maker.js for the chaining and removing duplicates, but this didn't always work. Therefor we moved on to custom.

The result SVG is below, where we combined x/y in a single path when they are close enough, so creating layer paths.

The path isn't filling correctly on some occasions, like the one below. Where should we look in the path to get a fully filled path layer?

<svg width="112mm" height="94mm" viewBox="2313.0507 -1099.573 112 94" version="1.1" xmlns="http://www.w3.org/2000/svg" style="stroke-linecap:round;stroke-linejoin:round;fill-rule:evenodd;  stroke: #000;stroke-width: 1.5px;"><g id="importedPart" transform="scale(1,-1)" fill-rule="evenodd" style="stroke-linecap:round;stroke-linejoin:round;fill:#c0c0c0;fill-rule:evenodd;"><path d="M2425.0507,1075.7029 L2425.0507,1029.4431 M2425.0507,1075.7029 A10,10 0 0,1 2417.8574,1085.301M2371.8574,1099.1711 L2417.8574,1085.301 M2371.8574,1099.1711 A10,10 0 0,1 2366.2441,1099.1711M2366.2441,1099.1711 L2320.2441,1085.301 M2320.2441,1085.301 A10,10 0 0,1 2313.0507,1075.7029M2313.0507,1029.4431 L2313.0507,1075.7029 M2313.0507,1029.4431 A10,10 0 0,1 2320.2441,1019.8451M2366.2441,1005.975 L2320.2441,1019.8451 M2366.2441,1005.975 A10,10 0 0,1 2371.8574,1005.975M2371.8574,1005.975 L2417.8574,1019.8451 M2417.8574,1019.8451 A10,10 0 0,1 2425.0507,1029.4431" id="4bcf575e-280a-415e-a59c-d62ff0dc0a80"></path><circle cx="2329.360729224585" cy="1070.833023906307" r="8.5" style="stroke-linecap:round;stroke-linejoin:round;fill:#FFF;fill-rule:odd-even;"></circle><circle cx="2408.740729224585" cy="1034.313023906308" r="8.5" style="stroke-linecap:round;stroke-linejoin:round;fill:#FFF;fill-rule:odd-even;"></circle></g></svg>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

清浅ˋ旧时光 2025-02-16 10:43:43

正如我评论的那样：您的道路可能是在Illustrator中绘制的或类似的。您需要再次绘制它，这次不抬起笔，除了两个圆圈。

接下来，我通过将无用的移动移至（M）命令（您抬起笔）并逆转了一些片段来重写路径。

<svg width="112mm" height="94mm" viewBox="2312 -1105 115 105" version="1.1" xmlns="http://www.w3.org/2000/svg" style="stroke-linecap:round;stroke-linejoin:round;fill-rule:evenodd;  stroke: #000;stroke-width: 1.5px;">
  <g id="importedPart" transform="scale(1,-1)">
    <path fill="silver" d="M2425.0507,1029.4431L2425.0507,1075.7029 
   A10,10 0 0,1 2417.8574,1085.301  L2371.8574,1099.1711
   A10,10 0 0,1 2366.2441,1099.1711  L2320.2441,1085.301
   A10,10 0 0,1 2313.0507,1075.7029
   L2313.0507,1029.4431
   A10,10 0 0,1 2320.2441,1019.8451 L2366.2441,1005.975
   A10,10 0 0,1 2371.8574,1005.975    L2417.8574,1019.845
   A10,10 0 0,1 2425.0507,1029.4431" />

    <circle cx="2329.360729224585" cy="1070.833023906307" r="8.5" style="fill:#FFF;"></circle>
    <circle cx="2408.740729224585" cy="1034.313023906308" r="8.5" style="fill:#FFF;"></circle>
  </g>
</svg>

另外：让您知道，您可以在上面的路径中绘制2个圆形孔，而不是绘制2个白色圆圈。在下一个示例中，我将圆圈绘制为路径和vi'm将这些路径的d属性串联到主体形状的d aribute。由于您有填充规则：evenodd这些圆圈将作为孔：

<svg width="112mm" height="94mm" viewBox="2312 -1105 115 105" version="1.1" xmlns="http://www.w3.org/2000/svg" style="stroke-linecap:round;stroke-linejoin:round;fill-rule:evenodd;  stroke: #000;stroke-width: 1.5px;">
  <g id="importedPart" transform="scale(1,-1)">
    <path fill="silver" d="M2425.0507,1029.4431L2425.0507,1075.7029 
   A10,10 0 0,1 2417.8574,1085.301  L2371.8574,1099.1711
   A10,10 0 0,1 2366.2441,1099.1711  L2320.2441,1085.301
   A10,10 0 0,1 2313.0507,1075.7029
   L2313.0507,1029.4431
   A10,10 0 0,1 2320.2441,1019.8451 L2366.2441,1005.975
   A10,10 0 0,1 2371.8574,1005.975    L2417.8574,1019.845
   A10,10 0 0,1 2425.0507,1029.4431
   
   M2337.860729224585 1070.833023906307 A8.5 8.5 0 0 1 2320.860729224585  1070.833023906307 A8.5 8.5 0 0 1 2337.860729224585  1070.833023906307
   
   M2417.240729224585 1034.313023906308 A8.5 8.5 0 0 1 2400.240729224585 1034.313023906308 A8.5 8.5 0 0 1 2417.240729224585 1034.313023906308 "/>
  </g>
</svg>

As I've commented: Your path is probably drawn in Illustrator or similar. You need to draw it again, this time without lifting the pen except for the 2 circles.

Next I've rewritten the path by removing the useless move to (M) commands (where you lifted the pen) and reversing some of the fragments.

<svg width="112mm" height="94mm" viewBox="2312 -1105 115 105" version="1.1" xmlns="http://www.w3.org/2000/svg" style="stroke-linecap:round;stroke-linejoin:round;fill-rule:evenodd;  stroke: #000;stroke-width: 1.5px;">
  <g id="importedPart" transform="scale(1,-1)">
    <path fill="silver" d="M2425.0507,1029.4431L2425.0507,1075.7029 
   A10,10 0 0,1 2417.8574,1085.301  L2371.8574,1099.1711
   A10,10 0 0,1 2366.2441,1099.1711  L2320.2441,1085.301
   A10,10 0 0,1 2313.0507,1075.7029
   L2313.0507,1029.4431
   A10,10 0 0,1 2320.2441,1019.8451 L2366.2441,1005.975
   A10,10 0 0,1 2371.8574,1005.975    L2417.8574,1019.845
   A10,10 0 0,1 2425.0507,1029.4431" />

    <circle cx="2329.360729224585" cy="1070.833023906307" r="8.5" style="fill:#FFF;"></circle>
    <circle cx="2408.740729224585" cy="1034.313023906308" r="8.5" style="fill:#FFF;"></circle>
  </g>
</svg>

Also: letting you know that instead of drawing 2 white circles you can draw 2 circular holes in the path above. In the next example I draw the circles as paths and vI'm concatenating the d attribute for those paths to the main shape's d aribute. Since you have fill-rule : evenodd those circles would apear as holes:

<svg width="112mm" height="94mm" viewBox="2312 -1105 115 105" version="1.1" xmlns="http://www.w3.org/2000/svg" style="stroke-linecap:round;stroke-linejoin:round;fill-rule:evenodd;  stroke: #000;stroke-width: 1.5px;">
  <g id="importedPart" transform="scale(1,-1)">
    <path fill="silver" d="M2425.0507,1029.4431L2425.0507,1075.7029 
   A10,10 0 0,1 2417.8574,1085.301  L2371.8574,1099.1711
   A10,10 0 0,1 2366.2441,1099.1711  L2320.2441,1085.301
   A10,10 0 0,1 2313.0507,1075.7029
   L2313.0507,1029.4431
   A10,10 0 0,1 2320.2441,1019.8451 L2366.2441,1005.975
   A10,10 0 0,1 2371.8574,1005.975    L2417.8574,1019.845
   A10,10 0 0,1 2425.0507,1029.4431
   
   M2337.860729224585 1070.833023906307 A8.5 8.5 0 0 1 2320.860729224585  1070.833023906307 A8.5 8.5 0 0 1 2337.860729224585  1070.833023906307
   
   M2417.240729224585 1034.313023906308 A8.5 8.5 0 0 1 2400.240729224585 1034.313023906308 A8.5 8.5 0 0 1 2417.240729224585 1034.313023906308 "/>
  </g>
</svg>

回复收藏 0 原文

~没有更多了~