Question

我的SVG图像是瑞士国旗的图式。中间的十字架由两条矩形路径构成。那些路径重叠。我想删除十字中间的两条垂直线，以使其与真实的标志架构保持一致。

有没有办法编辑代码以擦除这些行？

<g fill-rule="evenodd" stroke-width="1pt">
<path  stroke="white" stroke-width="1" fill="black" d="M0 0h640v480H0z"/>
<g fill="black">
  <path stroke="white" stroke-width="1" d="M170 194.997h299.996v89.997H170z"/>
  <path stroke="white" stroke-width="1" d="M275 89.997h89.996v299.996H275z"/>
</g>

https://jsfiddle.net/zoLdduxa/2/

Answer 1

可能不那么复杂：

＆＃13;

<svg xmlns="http://www.w3.org/2000/svg" width="640" height="480">
  <path fill="#fff" d="M1 1h640v480H1z"/>
  <path stroke="red" stroke-width="100" d="M320 50v380M130 240h380"/>
</svg>

＆＃13;

建议在此学习：https://www.w3.org/TR/SVG/shapes.html

在这里做一些魔术：https://jakearchibald.github.io/svgomg/

<强>更新单路交叉

＆＃13;

<svg xmlns="http://www.w3.org/2000/svg" width="640" height="480">
  <path stroke="#fff" d="M0 0h640v480H1V0z"/>
  <path stroke="#fff" d="M270 90h100v100h100v100H370v100H270V290H170V190h100V90z"/>
</svg>

＆＃13;

Answer 2

在绘制第二个形状后，使用stroke-width =＆＃34; 0＆＃34;重复第一行。它不漂亮，但应该有效。

    <path stroke="black" stroke-width="0" d="M170 194.997h299.996v89.997H170z"/>

＆＃13;

<svg xmlns="http://www.w3.org/2000/svg" width="640" height="480">
<g fill-rule="evenodd" stroke-width="1pt">
<path  stroke="white" stroke-width="1" fill="black" d="M0 0h640v480H0z"/>
<g fill="black">
<path stroke="white" stroke-width="1" d="M170 194.997h299.996v89.997H170z"/>
<path stroke="white" stroke-width="1" d="M275 89.997h89.996v299.996H275z"/>
<path stroke="black" stroke-width="0" d="M170 194.997h299.996v89.997H170z"/>
</g>
</svg>

＆＃13;

SVG路径 - 直接从代码中排除重叠形状

2 个答案: