首页 文章

Adobe Illustrator生成的SVG周围的空白区域

提问于
浏览 次
0

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

我正在尝试使用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不是一个选项 .

enter image description here

svg adobe-illustrator

2 回答

  • 0

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

    <?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>
    回复于
  • 0

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

    您可以将SVG中的 viewBox 视为定义页面大小 . 在Illustrator中，它对应于它所谓的"Artboard" .

    在Illustrator中保存之前，请转到画板设置（设置页面大小的位置）并选择选项"Fit to Artwork Bounds" . 现在当你保存时， viewBox 应该与你的设计大小相匹配，并且白色空间应该消失了 .

    回复于

相关问题