为什么SVG周围有空间？
[英]Why is there Space around SVG?
问题描述
I am trying to embed SVG in html file. 
我正在尝试将SVG嵌入html文件中。
You can view it at http://shrineweb.in/other-files/clients/proxymis/html/index.html 您可以在http://shrineweb.in/other-files/clients/proxymis/html/index.html中查看它
You can see that there is padding/margin around the image. 您会看到图像周围有填充/边距。
I want to remove it. 我要删除它。
Here is the code:-- 这是代码：-
<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="#3ABBD6" d="M43.945,65.639c-8.835,0-15.998-7.162-15.998-15.998c0-8.836,7.163-15.998,15.998-15.998
c6.004,0,11.229,3.312,13.965,8.203c0.664-0.113,1.338-0.205,2.033-0.205c6.627,0,11.998,5.373,11.998,12
c0,6.625-5.371,11.998-11.998,11.998C57.168,65.639,47.143,65.639,43.945,65.639z M59.943,61.639c4.418,0,8-3.582,8-7.998
c0-4.417-3.582-8-8-8c-1.601,0-3.082,0.481-4.334,1.291c-1.23-5.316-5.973-9.29-11.665-9.29c-6.626,0-11.998,5.372-11.998,11.999
c0,6.626,5.372,11.998,11.998,11.998C47.562,61.639,56.924,61.639,59.943,61.639z"/>
</svg>
3 个解决方案
解决方案1
2 2014-03-03 12:51:58
The padding is part of your svg image. 填充是SVG图片的一部分。 Use an image editing program (for example Adobe Illustrator, but there are probably good open source alternatives as well) to remove the space. 使用图像编辑程序（例如Adobe Illustrator，但也可能有很好的开源替代方案）来删除空间。 This is not something that you should fix in javascript. 这不是您应该在javascript中修复的问题。
解决方案2
0 2014-03-04 10:43:33
i haven't that much experience of SVG code but i have removed the left space from SVG CODE and then you can set style margin in negative to remove top space like this code... 我没有太多的SVG代码经验，但是我已经从SVG CODE中删除了左侧空间，然后可以将负数设置为样式余量以删除此代码中的顶部空间...
check it out ok... :) 看看吧... :)
it's not a perfect solution but it works well... 这不是一个完美的解决方案，但效果很好...
Thanks... 谢谢...
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<body>
<div style="margin-top:-40px;">
<svg id="Layer_1" xml:space="preserve" enable-background="new 0 0 100 100" viewBox="0 0 100 100" height="100px" width="100px" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1">
<path d="M15.945,65.639c-8.835,0-15.998-7.162-15.998-15.998c0-8.836,7.163-15.998,15.998-15.998 c6.004,0,11.229,3.312,13.965,8.203c0.664-0.113,1.338-0.205,2.033-0.205c6.627,0,11.998,5.373,11.998,12 c0,6.625-5.371,11.998-11.998,11.998C57.168,65.639,47.143,65.639,43.945,65.639z M31.943,61.639c4.418,0,8-3.582,8-7.998 c0-4.417-3.582-8-8-8c-1.601,0-3.082,0.481-4.334,1.291c-1.23-5.316-5.973-9.29-11.665-9.29c-6.626,0-11.998,5.372-11.998,11.999 c0,6.626,5.372,11.998,11.998,11.998C47.562,61.639,56.924,61.639,59.943,61.639z" fill="#3ABBD6">
</svg>
</div>
</body>
</html>
解决方案3
-1 2014-03-03 14:25:33
It's not svg element's margin, it's body element's. 它不是svg元素的边距，而是body元素的边距。
So you should append the style element under the head element and describe "margin:0" in it. 因此，您应该将样式元素附加在head元素下方，并在其中描述“ margin：0”。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>body{margin:0;}</style>
</head>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.