如何删除云和边框之间的空白区域?

Question

svg {
border: 1px solid #000;
}

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.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="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<path fill="red" fill-rule="evenodd" clip-rule="evenodd" d="M43.945,65.639c-8.835,0-15.998-7.162-15.998-15.998
	c0-8.836,7.163-15.998,15.998-15.998c6.004,0,11.229,3.312,13.965,8.203c0.664-0.113,1.338-0.205,2.033-0.205
	c6.627,0,11.999,5.373,11.999,12c0,6.625-5.372,11.998-11.999,11.998C57.168,65.639,47.143,65.639,43.945,65.639z M59.943,61.639
	c4.418,0,8-3.582,8-7.998c0-4.418-3.582-8-8-8c-1.6,0-3.082,0.481-4.333,1.291c-1.231-5.316-5.974-9.29-11.665-9.29
	c-6.626,0-11.998,5.372-11.998,11.999c0,6.626,5.372,11.998,11.998,11.998C47.562,61.639,56.924,61.639,59.943,61.639z"/>
</svg>

-5.372,11.998-11.999,11.998C57.168,65.639,47.143,65.639,43.945,65.639z M59.943,61.639 C4.418,0,8-3.582,8-7.998C0-4.418-3.582-8-8-8C-1.6,0-3.082,0.481-4.333,1.291C-1.231-5.316-5.974-9.29-11.665-9.29 C-6.626,0-11.998,5.372-11.998,11.999C0,6.626,5.372,11.998,11.998,11.998C47.562,61.639,56.924,61.639,59.943,61.639z"/>

Answer 1

我仍然不知道你喜欢它，所以我做了 2 个版本

svg{border:1px solid;}

<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="100" height="72,73" viewBox="27.946 33.642 44 32" >
<path id="test" fill="red" fill-rule="evenodd" clip-rule="evenodd" d="M43.945,65.639c-8.835,0-15.998-7.162-15.998-15.998
	c0-8.836,7.163-15.998,15.998-15.998c6.004,0,11.229,3.312,13.965,8.203c0.664-0.113,1.338-0.205,2.033-0.205
	c6.627,0,11.999,5.373,11.999,12c0,6.625-5.372,11.998-11.999,11.998C57.168,65.639,47.143,65.639,43.945,65.639z M59.943,61.639
	c4.418,0,8-3.582,8-7.998c0-4.418-3.582-8-8-8c-1.6,0-3.082,0.481-4.333,1.291c-1.231-5.316-5.974-9.29-11.665-9.29
	c-6.626,0-11.998,5.372-11.998,11.999c0,6.626,5.372,11.998,11.998,11.998C47.562,61.639,56.924,61.639,59.943,61.639z"/>
</svg>
<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="100" height="100" viewBox="27.946 27.642 44 44" >

<use xlink:href="#test" />
</svg>

我是怎么做到的：我使用了getBBox()云路径的方法。此方法返回路径边界框的大小和位置。我使用此数据更改了viewBox属性的值。

Answer 2

svg {
border: 1px solid #000;
}

<svg width="43.994999" height="31.996" xmlns="http://www.w3.org/2000/svg">
<path fill="red" fill-rule="evenodd" clip-rule="evenodd" d="m15.997999,31.996c-8.835,0 -15.998,-7.162 -15.998,-15.998c0,-8.836 7.163,-15.998 15.998,-15.998c6.004,0 11.229,3.312 13.965,8.203c0.664,-0.113 1.338,-0.205 2.033,-0.205c6.627,0 11.999,5.373 11.999,12c0,6.625 -5.372,11.998 -11.999,11.998c-2.775,0 -12.8,0 -15.998,0zm15.998,-4c4.418,0 8,-3.582 8,-7.998c0,-4.418 -3.582,-8 -8,-8c-1.6,0 -3.082,0.481 -4.333,1.291c-1.231,-5.316 -5.974,-9.29 -11.665,-9.29c-6.626,0 -11.998,5.372 -11.998,11.999c0,6.626 5.372,11.998 11.998,11.998c3.617,0 12.979,0 15.998,0z"/>
</svg>