Question

我想在html文件中嵌入SVG。

您可以在http://shrineweb.in/other-files/clients/proxymis/html/index.html

查看

您可以看到图像周围有填充/边距。

我想删除它。

以下是代码： -

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

Answer 1

填充是svg图像的一部分。使用图像编辑程序（例如Adobe Illustrator，但也可能有很好的开源替代品）来删除空间。这不是你应该在javascript中修复的东西。

Answer 2

我没有那么多的SVG代码经验，但是我已经从SVG代码中删除了左边空格，然后你可以将样式边距设置为负数以删除顶部空间，如此代码...

检查出来好......：）

这不是一个完美的解决方案，但效果很好......

...谢谢

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

Answer 3

这不是svg元素的边距，而是它的主体元素所以你应该将样式元素添加到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>

为什么SVG周围有空间？

3 个答案: