css - SVG - 填充标志模式中行之间的空格

Question

这是我的标志模式的 SVG 代码。我想用各种颜色绘制线条之间的空白区域。我试图更改“填充”和“描边”属性，但没有任何改变。我怎样才能做到这一点？我的代码和正确 View 的 fiddle 如下。

<?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

A <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>