Adobe Illustrator生成的SVG周围的空白

Question

提前感谢您提供所有帮助，我一直在网上尝试各种资源，但仍然无法完成这项工作。

我正在尝试使用svg创建一个3D矩形框。我在Adobe Illustrator中准备了图形，将软件中的3D特征应用于常规矩形，最后将其导出为SVG文件。虽然它在插画家的屏幕上看起来不错，但在浏览器上;对象似乎在每个多边形周围都有一个小的白色边框。

以下是Illustrator生成的svg代码。运行代码段后，您可以看到多边形周围的空白。我必须删除它周围的空白。

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<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="965px" height="720.3px" viewBox="0 0 965 720.3" enable-background="new 0 0 965 720.3" xml:space="preserve">
<g id="sections_2_">
	<g>
		<g enable-background="new    ">
			<g>
				<polygon fill="#836EA6" points="595.6,337.1 596.8,344.9 581.8,357.8 580.6,349.9 				"/>
			</g>
			<g>
				<polygon fill="#8670A9" points="532,311.5 595.6,337.1 580.6,349.9 568.3,360.1 				"/>
			</g>
			<g>
				<polygon fill="#736092" points="568.3,360.1 569.4,368 533.1,319.3 532,311.5 				"/>
			</g>
			<g>
				<polygon fill="#BF4142" points="568.3,360.1 569.4,368 508,340.3 506.9,332.5 				"/>
			</g>
			<g>
				<polygon fill="#836EA6" points="580.6,349.9 581.8,357.8 569.4,368 568.3,360.1 				"/>
			</g>
			<g>
				<polygon fill="#DE4D4E" points="531.9,311.5 568.3,360.1 506.9,332.5 511.7,328.6 524.8,317.8 				"/>
			</g>
		</g>
	</g>
</g>
</svg>

以下图片是屏幕上所需外观的样子。它必须是.svg文件，因此将其导出为jpeg或png不是一种选择。

Answer 1

调整viewBox以摆脱空白。我添加了一个黑色背景矩形，因此可以看到形状周围的空白，但是你可以删除它。

＆＃13;

＆＃13;

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<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="400px" height="200.3px" viewBox="502 307 98 63" enable-background="new 0 0 965 720.3" xml:space="preserve" overflow="hidden">
<rect x="502" y="307" width="98" height="63"/>
<g id="sections_2_">
	<g>
		<g enable-background="new    ">
			<g>
				<polygon fill="#836EA6" points="595.6,337.1 596.8,344.9 581.8,357.8 580.6,349.9 				"/>
			</g>
			<g>
				<polygon fill="#8670A9" points="532,311.5 595.6,337.1 580.6,349.9 568.3,360.1 				"/>
			</g>
			<g>
				<polygon fill="#736092" points="568.3,360.1 569.4,368 533.1,319.3 532,311.5 				"/>
			</g>
			<g>
				<polygon fill="#BF4142" points="568.3,360.1 569.4,368 508,340.3 506.9,332.5 				"/>
			</g>
			<g>
				<polygon fill="#836EA6" points="580.6,349.9 581.8,357.8 569.4,368 568.3,360.1 				"/>
			</g>
			<g>
				<polygon fill="#DE4D4E" points="531.9,311.5 568.3,360.1 506.9,332.5 511.7,328.6 524.8,317.8 				"/>
			</g>
		</g>
	</g>
</g>
</svg>

＆＃13;

＆＃13;

＆＃13;

Answer 2

该空格是因为您的SVG viewBox属性设置为比您的设计大得多的区域。

您可以将SVG中的viewBox视为定义页面大小。在Illustrator中，它对应于它所谓的“画板”。

在Illustrator中保存之前，请转到画板设置（设置页面大小的位置）并选择“适合图稿边界”选项。现在，当您保存时，viewBox应该与您的设计大小相匹配，并且白色空间应该消失。