SVG - 在标志架构中实现行之间的空格

Question

这是我的标志模式的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"/>

https://jsfiddle.net/zoLdduxa/1/

Answer 1

<line>只是画一条线从一个点到另一个点。 如果要用颜色填充"+"形状，则必须制作一个形状来描述该形状外部的完整连续边界。 <path>元素或<polygon>元素都适用于此示例。

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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"/>
    <polygon fill="#ffffff"
             points="797.333,   10.607,
                     797.333,  643.455,
                      15.868,  643.455,
                      15.868, 1099.579,
                     797.333, 1099.579,
                     797.333, 1735.411,
                    1246.936, 1735.411,
                    1246.936, 1112.52,
                    2818.179, 1112.52,
                    2818.179,  643.455,
                    1245.221,  643.455,
                    1245.221,   10.607" />
</g>
</svg>

Answer 2

我认为您的架构会更好(相应地更改 SVG 视图框/大小(

<svg xmlns="http://www.w3.org/2000/svg" height="480" width="640" viewBox="0 0 640 480">
  <path fill="#000" d="M0 0h640v480H0z"/>
  <path fill="#000" d="M0 174.545h640v130.909H0z" stroke-width="2" stroke="#fff" />
  <path fill="#000" d="M175.455 0h130.909v480H175.455z"  stroke-width="2" stroke="#fff" />
</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>

https://jsfiddle.net/ktgyh3sj/1/