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>只是从一个点到另一个点绘制一条线。如果你想要你的＆＃34; +＆＃34;要填充颜色的形状，您必须制作一个描述该形状外部的完整连续边界的形状。 <path>元素或<polygon>元素可用于此示例。

＆＃13;

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

＆＃13;

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/

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

2 个答案: