Css SVG-在标志模式中实现行与行之间的空格

这是我的标志模式SVG代码。我想用不同的颜色画线之间的空白。我试图更改“填充”和“笔划”属性，但没有任何更改。我怎样才能做到这一点？下面是我的代码和正确视图

<?xml version="1.0" encoding="utf-8"?>
< svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="300" height="300" viewBox="0 0 2834.65 1755" enable-background="new 0 0 2834.65 1755" xml:space="preserve">
< rect y="-4.728" stroke="#000000" stroke-miterlimit="10" width="2834.65" height="1757.841"/>
< g>
<rect x="15.868" y="10.607" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" width="2802.311" height="1724.804"/>
<line fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" x1="797.333" y1="10.607" x2="797.333" y2="643.455"/>
<line fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" x1="797.333" y1="643.455" x2="15.868" y2="643.455"/>

    <line fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" x1="1245.221" y1="10.607" x2="1245.221" y2="643.455"/>

    <line fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" x1="1245.221" y1="643.455" x2="2818.179" y2="643.455"/>

    <line fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" x1="1246.936" y1="1112.52" x2="1246.936" y2="1735.411"/>

    <line fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" x1="1245.221" y1="1112.52" x2="2818.179" y2="1112.52"/>

    <line fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" x1="797.333" y1="1099.579" x2="797.333" y2="1735.411"/>

    <line fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" x1="797.333" y1="1099.579" x2="15.868" y2="1099.579"/>

A

只是从一点到另一点画一条线。如果你想要你的“+”形状被颜色填充，你必须制作一个形状来描述围绕该形状外部的完整连续边界。

元素或

元素都适用于本例

A

只是从一点到另一点画一条线。如果你想要你的“+”形状被颜色填充，你必须制作一个形状来描述围绕该形状外部的完整连续边界。

元素或

元素都适用于本例

---

我认为您的模式最好是这样（相应地更改SVG视图框/大小）

唯一的问题是两个路径笔划都会交叉，一个会将另一个放在下面。如果您不想这样做，请创建4个正方形（左上角、左下角、右上角矩形、右下角矩形），并对所有4个正方形进行笔划（注意标记边框），或者您可以创建一个十字形状作为多边形，并完成此操作。演示如下：

<svg xmlns="http://www.w3.org/2000/svg" height="480" width="640" viewBox="0 0 640 480">
  <path fill="#000" d="M0 0h640v480H0z"/>
  <polygon fill="#000" points="0,180 180,180 180,0 300,0 300,180 640,180 640,300 300,300 300,480 180,480 180,300 0,300 z" stroke="#fff" stroke-width="2" />
</svg>

---

我认为您的模式最好是这样（相应地更改SVG视图框/大小）

唯一的问题是两个路径笔划都会交叉，一个会将另一个放在下面。如果您不想这样做，请创建4个正方形（左上角、左下角、右上角矩形、右下角矩形），并对所有4个正方形进行笔划（注意标记边框），或者您可以创建一个十字形状作为多边形，并完成此操作。演示如下：

<svg xmlns="http://www.w3.org/2000/svg" height="480" width="640" viewBox="0 0 640 480">
  <path fill="#000" d="M0 0h640v480H0z"/>
  <polygon fill="#000" points="0,180 180,180 180,0 300,0 300,180 640,180 640,300 300,300 300,480 180,480 180,300 0,300 z" stroke="#fff" stroke-width="2" />
</svg>

---

我不确定如何解决您的问题，但我想建议使用此SVG标志库以获得可能的解决方案：我不确定如何解决您的问题，但我想建议使用此SVG标志库以获得可能的解决方案：感谢您指导我走向正确的方向！但是你是怎么改变代码的？我还有其他几个需要上色的国旗图案（包括英国）。有什么程序吗？我只是从你的线端点取了坐标，然后按照十字形状的顺序重新排列。如果使用矢量编辑器，则只需将形状绘制为连续路径。你应该能够找到视频解释如何做，如果你不能解决它。谢谢你指导我朝着正确的方向！但是你是怎么改变代码的？我还有其他几个需要上色的国旗图案（包括英国）。有什么程序吗？我只是从你的线端点取了坐标，然后按照十字形状的顺序重新排列。如果使用矢量编辑器，则只需将形状绘制为连续路径。你应该能够找到视频解释如何做到这一点，如果你不能解决它。