堆栈内存溢出
  简体   繁体   English

如何删除SVG周围的空白区域

[英]How to remove blank space around SVG

 原文  2015-11-23 17:47:18  6   2    html/ css/ svg

问题描述

I have an SVG showing on a simple web page, but once I resize the image beyond a certain size (height: ~65vh) the SVG has an invisible space around it that makes the page massive and have a scroll bar that goes down, and the image also has a large margin on the top.我有一个 SVG 显示在一个简单的网页上，但是一旦我将图像的大小调整到超过特定大小（高度：~65vh），SVG 周围就会有一个不可见的空间，这使得页面变得很大并且有一个向下滚动的滚动条，并且图像顶部也有很大的边距。 I've tried reducing the size of the viewbox in the SVG and setting the height and width in CSS.我尝试减小 SVG 中视图框的大小并在 CSS 中设置高度和宽度。 This is what the page looks like with the following code and snippet: I simply want the SVG to not have the massive border around it and just have the chip to manipulate the size of.这就是带有以下代码和片段的页面的样子：我只是希望 SVG 周围没有大量边框，而只有可以操作大小的芯片。 在此处输入图片说明 

 .body { background-color: #660033; }
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CPU Animation / joshstroup.me</title> </head> <body> <?xml version="1.0" encoding="utf-8" ?> <!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg style="height: 70vh; margin-top: 40vh; overflow: hidden" 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" viewBox="500 500 1000 1000" style="enable-background:new 0 0 2000 2000;" xml:space="preserve"> <style type="text/css"> .st0 { fill: rgba(255, 255, 255, 0); } .st1 { fill: #363636; } .st2 { fill: #FEFEFE; } </style> <g> <g> <path class="st0" d="M1000.4,1240.5c-79.7,0-159.4,0-239,0c-0.9,0-1.1-0.2-1.1-1.1c0-159.4,0-318.7,0-478.1c0-0.9,0.2-1.1,1.1-1.1 c159.4,0,318.7,0,478.1,0c0.9,0,1.1,0.2,1.1,1.1c0,159.4,0,318.7,0,478.1c0,0.9-0.2,1.1-1.1,1.1 C1159.7,1240.5,1080,1240.5,1000.4,1240.5z" /> <path class="st1" d="M1017.4,1110.6c-3,0-6.1,0-9.1,0c-0.9,0-1.1,0.3-1.1,1.2c0,5,0,10.1,0,15.1c0,3-1.9,5.6-4.7,6.6 c-2.8,1-5.8,0.2-7.7-2c-1.2-1.4-1.7-2.9-1.7-4.7c0-5,0-9.9,0-14.9c0-0.9-0.2-1.2-1.2-1.2c-6.1,0-12.2,0-18.4,0 c-0.9,0-1.1,0.2-1.1,1.1c0,5,0,10.1,0,15.1c0,3.7-2.9,6.8-6.5,7c-3.7,0.3-6.9-2.3-7.5-6c-0.1-0.5-0.1-1-0.1-1.6 c0-4.8,0-9.6,0-14.4c0-1-0.2-1.4-1.3-1.3c-6,0.1-11.9,0.1-17.9,0c-1,0-1.3,0.2-1.3,1.2c0.1,5,0.1,10,0,15c0,3.7-2.9,6.8-6.5,7 c-3.7,0.3-6.9-2.3-7.5-6c-0.1-0.5-0.1-1-0.1-1.6c0-4.8,0-9.6,0-14.4c0-1.1-0.4-1.4-1.4-1.4c-5.2,0-10.4,0-15.6,0 c-9.7,0-17.1-7.4-17.1-17.1c0-5.2,0-10.3,0-15.5c0-1.2-0.2-1.6-1.5-1.5c-4.8,0.1-9.5,0.1-14.3,0c-3.7,0-6.8-2.9-7.1-6.5 c-0.3-3.7,2.3-6.9,6-7.5c0.5-0.1,1.1-0.1,1.7-0.1c4.7,0,9.4,0,14,0c0.9,0,1.1-0.3,1.1-1.2c0-6,0-12.1,0-18.1c0-1-0.3-1.2-1.2-1.2 c-4.7,0-9.4,0-14.2,0c-4.3,0-7.5-3.1-7.4-7.1c0-4,3.2-7,7.4-7c4.8,0,9.5,0,14.3,0c0.9,0,1.1-0.2,1.1-1.1c0-6.2,0-12.3,0-18.5 c0-0.9-0.3-1.1-1.1-1.1c-4.8,0-9.5,0-14.3,0c-4.3,0-7.5-3.1-7.5-7.1c0-4,3.2-7,7.4-7c4.8,0,9.5,0,14.3,0c0.9,0,1.2-0.2,1.1-1.1 c0-6.2,0-12.3,0-18.5c0-0.8-0.2-1.1-1.1-1.1c-4.8,0-9.5,0-14.3,0c-4.3,0-7.5-3.1-7.5-7.1c0-4,3.2-7,7.5-7.1c4.7,0,9.4,0,14,0 c1,0,1.3-0.2,1.3-1.2c-0.1-6,0-12,0-18c0-0.9-0.2-1.2-1.2-1.2c-4.7,0.1-9.4,0-14.2,0c-4.3,0-7.5-3-7.5-7.1c0-4,3.2-7.1,7.5-7.1 c4.6,0,9.2,0,13.8,0c1.7,0,1.5,0.2,1.5-1.6c0-5.1,0-10.2,0-15.4c0-9.8,7.3-17.1,17.2-17.2c5.2,0,10.4,0,15.6,0 c1,0,1.4-0.2,1.3-1.3c-0.1-4.4,0-8.7,0-13.1c0-4.3,3-7.5,7.1-7.5c4,0,7.1,3.2,7.1,7.5c0,4.4,0,8.8,0,13.2c0,0.8,0.1,1.2,1.1,1.2 c6.1,0,12.2,0,18.2,0c0.9,0,1.1-0.3,1.1-1.2c0-4.5,0-9,0-13.6c0-3.8,2.8-6.8,6.5-7.1c3.7-0.3,6.9,2.2,7.6,5.9 c0.1,0.6,0.1,1.2,0.1,1.8c0,4.4,0,8.7,0,13.1c0,0.8,0.2,1.1,1.1,1.1c6.2,0,12.3,0,18.5,0c0.9,0,1.1-0.3,1.1-1.2 c0-4.4,0-8.9,0-13.3c0-4.2,3.1-7.4,7-7.4c4,0,7.1,3.2,7.1,7.3c0,4.5,0,9,0,13.4c0,0.8,0.2,1.1,1.1,1.1c6.2,0,12.4,0,18.6,0 c0.8,0,1-0.2,1-1c0-4.6,0-9.1,0-13.7c0-3.8,2.8-6.8,6.4-7.1c3.7-0.3,6.9,2.2,7.6,5.9c0.1,0.7,0.1,1.4,0.1,2.2c0,4.2,0,8.4,0,12.6 c0,0.9,0.2,1.2,1.2,1.2c6,0,12.1,0,18.1,0c0.9,0,1.2-0.2,1.1-1.1c0-4.6,0-9.1,0-13.7c0-3.7,2.9-6.8,6.5-7c3.7-0.3,6.9,2.3,7.5,6 c0.1,0.7,0.1,1.4,0.1,2c0,4.1,0,8.2,0,12.2c0,1.8-0.2,1.6,1.5,1.6c5.1,0,10.2,0,15.4,0c9.9,0,17.2,7.3,17.2,17.2 c0,5.2,0,10.4,0,15.6c0,1,0.2,1.3,1.2,1.3c5.3-0.1,10.6,0,16,0c3.7,0,6.8,2.9,7,6.5c0.3,3.7-2.3,6.9-6,7.5 c-0.5,0.1-1.1,0.1-1.7,0.1c-5.1,0-10.2,0-15.4,0c-0.9,0-1.3,0.1-1.2,1.2c0.1,6,0,12.1,0,18.1c0,1,0.3,1.2,1.2,1.2 c5.4,0,10.7,0,16.1,0c3.5,0,6.3,2.6,6.9,6c0.5,3.3-1.5,6.6-4.7,7.7c-0.9,0.3-1.8,0.4-2.7,0.4c-5.2,0-10.4,0-15.6,0 c-0.9,0-1.1,0.3-1.1,1.1c0,6.1,0,12.2,0,18.4c0,1,0.3,1.2,1.2,1.2c5.4,0,10.7,0,16.1,0c3.5,0,6.3,2.6,6.9,6 c0.5,3.3-1.5,6.6-4.7,7.7c-0.9,0.3-1.8,0.4-2.7,0.4c-5.2,0-10.4,0-15.6,0c-0.9,0-1.1,0.2-1.1,1.1c0,6.2,0,12.3,0,18.5 c0,0.9,0.3,1.1,1.1,1.1c5.4,0,10.8,0,16.2,0c3.5,0,6.4,2.6,6.9,6.1c0.5,3.3-1.6,6.6-4.9,7.7c-0.8,0.3-1.7,0.4-2.6,0.4 c-5.2,0-10.4,0-15.6,0c-0.9,0-1.2,0.2-1.2,1.1c0,6.1,0,12.2,0,18.2c0,0.8,0.2,1.1,1.1,1.1c5.4,0,10.8,0,16.2,0 c3.5,0,6.4,2.6,6.9,6.1c0.5,3.3-1.6,6.6-4.8,7.7c-0.8,0.3-1.7,0.4-2.6,0.4c-5.1,0-10.2,0-15.4,0c-1,0-1.4,0.2-1.4,1.4 c0.1,5.2,0,10.4,0,15.6c0,9.8-7.4,17.1-17.2,17.1c-5.2,0-10.5,0-15.7,0c-0.9,0-1.2,0.2-1.2,1.2c0,5.1,0.1,10.2,0,15.2 c0,3.3-2.3,6-5.5,6.7c-3.1,0.7-6.3-0.8-7.8-3.6c-0.6-1.1-0.8-2.3-0.8-3.6c0-4.9,0-9.8,0-14.6c0-0.9-0.2-1.3-1.2-1.3 c-6,0.1-12,0.1-18,0c-1,0-1.2,0.3-1.2,1.3c0,5,0,9.9,0,14.9c0,3.8-2.8,6.8-6.5,7.1c-3.7,0.3-6.9-2.2-7.6-5.9 c-0.1-0.5-0.1-1.1-0.1-1.7c0-4.9,0-9.8,0-14.6c0-0.8-0.2-1.1-1.1-1.1C1023.7,1110.7,1020.5,1110.6,1017.4,1110.6z" /> <path class="st2" d="M1000.1,938.6c20,0,40.1,0,60.1,0c1.1,0,1.5,0.2,1.5,1.4c0,40.1,0,80.2,0,120.3c0,1.1-0.2,1.4-1.4,1.4 c-40.2,0-80.3,0-120.5,0c-1,0-1.3-0.2-1.3-1.3c0-40.2,0-80.4,0-120.6c0-1.1,0.4-1.3,1.4-1.3C960,938.6,980.1,938.6,1000.1,938.6z" /> <path class="st1" d="M1000.5,1040.6c-7.6,0-15.3,0-22.9,0c-8.3,0-15-5.3-16.8-13.5c-0.2-1.1-0.4-2.3-0.4-3.4c0-15.4,0-30.9,0-46.3 c0-9.5,7.5-16.9,17-16.9c15.4,0,30.8,0,46.2,0c9.5,0,17,7.5,17,17c0,15.4,0,30.8,0,46.2c0,9.6-7.5,17-17,17 C1015.8,1040.6,1008.2,1040.6,1000.5,1040.6z" /> </g> </g> </svg> </body> </html>

2 个解决方案

解决方案1
 23 已采纳  2015-11-23 18:29:41

I opened your svg on Inkscape and resized the document size to fit the content.我在 Inkscape 上打开了您的 svg 并调整了文档大小以适合内容。 (File -> Document Properties -> Resize page to content -> Resize page to drawing or selection)

Output:输出：

<?xml version="1.0" encoding="utf-8"?>
<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"
    viewBox="500 500 268.2734 266.75002"
    style="enable-background:new 0 0 2000 2000;" xml:space="preserve">
<style type="text/css">
    .st0{fill:rgba(255,255,255,0);}
    .st1{fill:#363636;}
    .st2{fill:#FEFEFE;}
</style>
<path
   class="st1"
   d="m 651,743.42436 c -3,0 -6.1,0 -9.1,0 -0.9,0 -1.1,0.3 -1.1,1.2 0,5 0,10.1 0,15.1 0,3 -1.9,5.6 -4.7,6.6 -2.8,1 -5.8,0.2 -7.7,-2 -1.2,-1.4 -1.7,-2.9 -1.7,-4.7 0,-5 0,-9.9 0,-14.9 0,-0.9 -0.2,-1.2 -1.2,-1.2 -6.1,0 -12.2,0 -18.4,0 -0.9,0 -1.1,0.2 -1.1,1.1 0,5 0,10.1 0,15.1 0,3.7 -2.9,6.8 -6.5,7 -3.7,0.3 -6.9,-2.3 -7.5,-6 -0.1,-0.5 -0.1,-1 -0.1,-1.6 0,-4.8 0,-9.6 0,-14.4 0,-1 -0.2,-1.4 -1.3,-1.3 -6,0.1 -11.9,0.1 -17.9,0 -1,0 -1.3,0.2 -1.3,1.2 0.1,5 0.1,10 0,15 0,3.7 -2.9,6.8 -6.5,7 -3.7,0.3 -6.9,-2.3 -7.5,-6 -0.1,-0.5 -0.1,-1 -0.1,-1.6 0,-4.8 0,-9.6 0,-14.4 0,-1.1 -0.4,-1.4 -1.4,-1.4 -5.2,0 -10.4,0 -15.6,0 -9.7,0 -17.1,-7.4 -17.1,-17.1 0,-5.2 0,-10.3 0,-15.5 0,-1.2 -0.2,-1.6 -1.5,-1.5 -4.8,0.1 -9.5,0.1 -14.3,0 -3.7,0 -6.8,-2.9 -7.1,-6.5 -0.3,-3.7 2.3,-6.9 6,-7.5 0.5,-0.1 1.1,-0.1 1.7,-0.1 4.7,0 9.4,0 14,0 0.9,0 1.1,-0.3 1.1,-1.2 0,-6 0,-12.1 0,-18.1 0,-1 -0.3,-1.2 -1.2,-1.2 -4.7,0 -9.4,0 -14.2,0 -4.3,0 -7.5,-3.1 -7.4,-7.1 0,-4 3.2,-7 7.4,-7 4.8,0 9.5,0 14.3,0 0.9,0 1.1,-0.2 1.1,-1.1 0,-6.2 0,-12.3 0,-18.5 0,-0.9 -0.3,-1.1 -1.1,-1.1 -4.8,0 -9.5,0 -14.3,0 -4.3,0 -7.5,-3.1 -7.5,-7.1 0,-4 3.2,-7 7.4,-7 4.8,0 9.5,0 14.3,0 0.9,0 1.2,-0.2 1.1,-1.1 0,-6.2 0,-12.3 0,-18.5 0,-0.8 -0.2,-1.1 -1.1,-1.1 -4.8,0 -9.5,0 -14.3,0 -4.3,0 -7.5,-3.1 -7.5,-7.1 0,-4 3.2,-7 7.5,-7.1 4.7,0 9.4,0 14,0 1,0 1.3,-0.2 1.3,-1.2 -0.1,-6 0,-12 0,-18 0,-0.9 -0.2,-1.2 -1.2,-1.2 -4.7,0.1 -9.4,0 -14.2,0 -4.3,0 -7.5,-3 -7.5,-7.1 0,-4 3.2,-7.1 7.5,-7.1 4.6,0 9.2,0 13.8,0 1.7,0 1.5,0.2 1.5,-1.6 0,-5.1 0,-10.2 0,-15.4 0,-9.8 7.3,-17.1 17.2,-17.2 5.2,0 10.4,0 15.6,0 1,0 1.4,-0.2 1.3,-1.3 -0.1,-4.4 0,-8.7 0,-13.1 0,-4.3 3,-7.5 7.1,-7.5 4,0 7.1,3.2 7.1,7.5 0,4.4 0,8.8 0,13.2 0,0.8 0.1,1.2 1.1,1.2 6.1,0 12.2,0 18.2,0 0.9,0 1.1,-0.3 1.1,-1.2 0,-4.5 0,-9 0,-13.6 0,-3.8 2.8,-6.8 6.5,-7.1 3.7,-0.3 6.9,2.2 7.6,5.9 0.1,0.6 0.1,1.2 0.1,1.8 0,4.4 0,8.7 0,13.1 0,0.8 0.2,1.1 1.1,1.1 6.2,0 12.3,0 18.5,0 0.9,0 1.1,-0.3 1.1,-1.2 0,-4.4 0,-8.9 0,-13.3 0,-4.2 3.1,-7.4 7,-7.4 4,0 7.1,3.2 7.1,7.3 0,4.5 0,9 0,13.4 0,0.8 0.2,1.1 1.1,1.1 6.2,0 12.4,0 18.6,0 0.8,0 1,-0.2 1,-1 0,-4.6 0,-9.1 0,-13.7 0,-3.8 2.8,-6.8 6.4,-7.1 3.7,-0.3 6.9,2.2 7.6,5.9 0.1,0.7 0.1,1.4 0.1,2.2 0,4.2 0,8.4 0,12.6 0,0.9 0.2,1.2 1.2,1.2 6,0 12.1,0 18.1,0 0.9,0 1.2,-0.2 1.1,-1.1 0,-4.6 0,-9.1 0,-13.7 0,-3.7 2.9,-6.8 6.5,-7 3.7,-0.3 6.9,2.3 7.5,6 0.1,0.7 0.1,1.4 0.1,2 0,4.1 0,8.2 0,12.2 0,1.8 -0.2,1.6 1.5,1.6 5.1,0 10.2,0 15.4,0 9.9,0 17.2,7.3 17.2,17.2 0,5.2 0,10.4 0,15.6 0,1 0.2,1.3 1.2,1.3 5.3,-0.1 10.6,0 16,0 3.7,0 6.8,2.9 7,6.5 0.3,3.7 -2.3,6.9 -6,7.5 -0.5,0.1 -1.1,0.1 -1.7,0.1 -5.1,0 -10.2,0 -15.4,0 -0.9,0 -1.3,0.1 -1.2,1.2 0.1,6 0,12.1 0,18.1 0,1 0.3,1.2 1.2,1.2 5.4,0 10.7,0 16.1,0 3.5,0 6.3,2.6 6.9,6 0.5,3.3 -1.5,6.6 -4.7,7.7 -0.9,0.3 -1.8,0.4 -2.7,0.4 -5.2,0 -10.4,0 -15.6,0 -0.9,0 -1.1,0.3 -1.1,1.1 0,6.1 0,12.2 0,18.4 0,1 0.3,1.2 1.2,1.2 5.4,0 10.7,0 16.1,0 3.5,0 6.3,2.6 6.9,6 0.5,3.3 -1.5,6.6 -4.7,7.7 -0.9,0.3 -1.8,0.4 -2.7,0.4 -5.2,0 -10.4,0 -15.6,0 -0.9,0 -1.1,0.2 -1.1,1.1 0,6.2 0,12.3 0,18.5 0,0.9 0.3,1.1 1.1,1.1 5.4,0 10.8,0 16.2,0 3.5,0 6.4,2.6 6.9,6.1 0.5,3.3 -1.6,6.6 -4.9,7.7 -0.8,0.3 -1.7,0.4 -2.6,0.4 -5.2,0 -10.4,0 -15.6,0 -0.9,0 -1.2,0.2 -1.2,1.1 0,6.1 0,12.2 0,18.2 0,0.8 0.2,1.1 1.1,1.1 5.4,0 10.8,0 16.2,0 3.5,0 6.4,2.6 6.9,6.1 0.5,3.3 -1.6,6.6 -4.8,7.7 -0.8,0.3 -1.7,0.4 -2.6,0.4 -5.1,0 -10.2,0 -15.4,0 -1,0 -1.4,0.2 -1.4,1.4 0.1,5.2 0,10.4 0,15.6 0,9.8 -7.4,17.1 -17.2,17.1 -5.2,0 -10.5,0 -15.7,0 -0.9,0 -1.2,0.2 -1.2,1.2 0,5.1 0.1,10.2 0,15.2 0,3.3 -2.3,6 -5.5,6.7 -3.1,0.7 -6.3,-0.8 -7.8,-3.6 -0.6,-1.1 -0.8,-2.3 -0.8,-3.6 0,-4.9 0,-9.8 0,-14.6 0,-0.9 -0.2,-1.3 -1.2,-1.3 -6,0.1 -12,0.1 -18,0 -1,0 -1.2,0.3 -1.2,1.3 0,5 0,9.9 0,14.9 0,3.8 -2.8,6.8 -6.5,7.1 -3.7,0.3 -6.9,-2.2 -7.6,-5.9 -0.1,-0.5 -0.1,-1.1 -0.1,-1.7 0,-4.9 0,-9.8 0,-14.6 0,-0.8 -0.2,-1.1 -1.1,-1.1 -2.7,0.4 -5.9,0.3 -9,0.3 z"
   id="path11"
   inkscape:connector-curvature="0"
   style="fill:#363636" /><path
   class="st2"
   d="m 633.7,571.42436 c 20,0 40.1,0 60.1,0 1.1,0 1.5,0.2 1.5,1.4 0,40.1 0,80.2 0,120.3 0,1.1 -0.2,1.4 -1.4,1.4 -40.2,0 -80.3,0 -120.5,0 -1,0 -1.3,-0.2 -1.3,-1.3 0,-40.2 0,-80.4 0,-120.6 0,-1.1 0.4,-1.3 1.4,-1.3 20.1,0.1 40.2,0.1 60.2,0.1 z"
   id="path13"
   inkscape:connector-curvature="0"
   style="fill:#fefefe" /><path
   class="st1"
   d="m 634.1,673.42436 c -7.6,0 -15.3,0 -22.9,0 -8.3,0 -15,-5.3 -16.8,-13.5 -0.2,-1.1 -0.4,-2.3 -0.4,-3.4 0,-15.4 0,-30.9 0,-46.3 0,-9.5 7.5,-16.9 17,-16.9 15.4,0 30.8,0 46.2,0 9.5,0 17,7.5 17,17 0,15.4 0,30.8 0,46.2 0,9.6 -7.5,17 -17,17 -7.8,-0.1 -15.4,-0.1 -23.1,-0.1 z"
   id="path15"
   inkscape:connector-curvature="0"
   style="fill:#363636" />
</svg>

Now that the svg was fixed, you can put it in your file and set the height.现在 svg 已修复，您可以将其放入文件并设置高度。 In this case height:70vh;在这种情况下height:70vh; (For performance reasons, it's recommended to set height and width, but it's up to you). （出于性能原因，建议设置高度和宽度，但这取决于您）。 

 #Layer_1{ /*Change svg id to a meaningful name*/ height:70vh }
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CPU Animation / joshstroup.me</title> </head> <body> <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" viewBox="500 500 268.2734 266.75002" style="enable-background:new 0 0 2000 2000;" xml:space="preserve"> <style type="text/css"> .st0{fill:rgba(255,255,255,0);} .st1{fill:#363636;} .st2{fill:#FEFEFE;} </style> <path class="st1" d="m 651,743.42436 c -3,0 -6.1,0 -9.1,0 -0.9,0 -1.1,0.3 -1.1,1.2 0,5 0,10.1 0,15.1 0,3 -1.9,5.6 -4.7,6.6 -2.8,1 -5.8,0.2 -7.7,-2 -1.2,-1.4 -1.7,-2.9 -1.7,-4.7 0,-5 0,-9.9 0,-14.9 0,-0.9 -0.2,-1.2 -1.2,-1.2 -6.1,0 -12.2,0 -18.4,0 -0.9,0 -1.1,0.2 -1.1,1.1 0,5 0,10.1 0,15.1 0,3.7 -2.9,6.8 -6.5,7 -3.7,0.3 -6.9,-2.3 -7.5,-6 -0.1,-0.5 -0.1,-1 -0.1,-1.6 0,-4.8 0,-9.6 0,-14.4 0,-1 -0.2,-1.4 -1.3,-1.3 -6,0.1 -11.9,0.1 -17.9,0 -1,0 -1.3,0.2 -1.3,1.2 0.1,5 0.1,10 0,15 0,3.7 -2.9,6.8 -6.5,7 -3.7,0.3 -6.9,-2.3 -7.5,-6 -0.1,-0.5 -0.1,-1 -0.1,-1.6 0,-4.8 0,-9.6 0,-14.4 0,-1.1 -0.4,-1.4 -1.4,-1.4 -5.2,0 -10.4,0 -15.6,0 -9.7,0 -17.1,-7.4 -17.1,-17.1 0,-5.2 0,-10.3 0,-15.5 0,-1.2 -0.2,-1.6 -1.5,-1.5 -4.8,0.1 -9.5,0.1 -14.3,0 -3.7,0 -6.8,-2.9 -7.1,-6.5 -0.3,-3.7 2.3,-6.9 6,-7.5 0.5,-0.1 1.1,-0.1 1.7,-0.1 4.7,0 9.4,0 14,0 0.9,0 1.1,-0.3 1.1,-1.2 0,-6 0,-12.1 0,-18.1 0,-1 -0.3,-1.2 -1.2,-1.2 -4.7,0 -9.4,0 -14.2,0 -4.3,0 -7.5,-3.1 -7.4,-7.1 0,-4 3.2,-7 7.4,-7 4.8,0 9.5,0 14.3,0 0.9,0 1.1,-0.2 1.1,-1.1 0,-6.2 0,-12.3 0,-18.5 0,-0.9 -0.3,-1.1 -1.1,-1.1 -4.8,0 -9.5,0 -14.3,0 -4.3,0 -7.5,-3.1 -7.5,-7.1 0,-4 3.2,-7 7.4,-7 4.8,0 9.5,0 14.3,0 0.9,0 1.2,-0.2 1.1,-1.1 0,-6.2 0,-12.3 0,-18.5 0,-0.8 -0.2,-1.1 -1.1,-1.1 -4.8,0 -9.5,0 -14.3,0 -4.3,0 -7.5,-3.1 -7.5,-7.1 0,-4 3.2,-7 7.5,-7.1 4.7,0 9.4,0 14,0 1,0 1.3,-0.2 1.3,-1.2 -0.1,-6 0,-12 0,-18 0,-0.9 -0.2,-1.2 -1.2,-1.2 -4.7,0.1 -9.4,0 -14.2,0 -4.3,0 -7.5,-3 -7.5,-7.1 0,-4 3.2,-7.1 7.5,-7.1 4.6,0 9.2,0 13.8,0 1.7,0 1.5,0.2 1.5,-1.6 0,-5.1 0,-10.2 0,-15.4 0,-9.8 7.3,-17.1 17.2,-17.2 5.2,0 10.4,0 15.6,0 1,0 1.4,-0.2 1.3,-1.3 -0.1,-4.4 0,-8.7 0,-13.1 0,-4.3 3,-7.5 7.1,-7.5 4,0 7.1,3.2 7.1,7.5 0,4.4 0,8.8 0,13.2 0,0.8 0.1,1.2 1.1,1.2 6.1,0 12.2,0 18.2,0 0.9,0 1.1,-0.3 1.1,-1.2 0,-4.5 0,-9 0,-13.6 0,-3.8 2.8,-6.8 6.5,-7.1 3.7,-0.3 6.9,2.2 7.6,5.9 0.1,0.6 0.1,1.2 0.1,1.8 0,4.4 0,8.7 0,13.1 0,0.8 0.2,1.1 1.1,1.1 6.2,0 12.3,0 18.5,0 0.9,0 1.1,-0.3 1.1,-1.2 0,-4.4 0,-8.9 0,-13.3 0,-4.2 3.1,-7.4 7,-7.4 4,0 7.1,3.2 7.1,7.3 0,4.5 0,9 0,13.4 0,0.8 0.2,1.1 1.1,1.1 6.2,0 12.4,0 18.6,0 0.8,0 1,-0.2 1,-1 0,-4.6 0,-9.1 0,-13.7 0,-3.8 2.8,-6.8 6.4,-7.1 3.7,-0.3 6.9,2.2 7.6,5.9 0.1,0.7 0.1,1.4 0.1,2.2 0,4.2 0,8.4 0,12.6 0,0.9 0.2,1.2 1.2,1.2 6,0 12.1,0 18.1,0 0.9,0 1.2,-0.2 1.1,-1.1 0,-4.6 0,-9.1 0,-13.7 0,-3.7 2.9,-6.8 6.5,-7 3.7,-0.3 6.9,2.3 7.5,6 0.1,0.7 0.1,1.4 0.1,2 0,4.1 0,8.2 0,12.2 0,1.8 -0.2,1.6 1.5,1.6 5.1,0 10.2,0 15.4,0 9.9,0 17.2,7.3 17.2,17.2 0,5.2 0,10.4 0,15.6 0,1 0.2,1.3 1.2,1.3 5.3,-0.1 10.6,0 16,0 3.7,0 6.8,2.9 7,6.5 0.3,3.7 -2.3,6.9 -6,7.5 -0.5,0.1 -1.1,0.1 -1.7,0.1 -5.1,0 -10.2,0 -15.4,0 -0.9,0 -1.3,0.1 -1.2,1.2 0.1,6 0,12.1 0,18.1 0,1 0.3,1.2 1.2,1.2 5.4,0 10.7,0 16.1,0 3.5,0 6.3,2.6 6.9,6 0.5,3.3 -1.5,6.6 -4.7,7.7 -0.9,0.3 -1.8,0.4 -2.7,0.4 -5.2,0 -10.4,0 -15.6,0 -0.9,0 -1.1,0.3 -1.1,1.1 0,6.1 0,12.2 0,18.4 0,1 0.3,1.2 1.2,1.2 5.4,0 10.7,0 16.1,0 3.5,0 6.3,2.6 6.9,6 0.5,3.3 -1.5,6.6 -4.7,7.7 -0.9,0.3 -1.8,0.4 -2.7,0.4 -5.2,0 -10.4,0 -15.6,0 -0.9,0 -1.1,0.2 -1.1,1.1 0,6.2 0,12.3 0,18.5 0,0.9 0.3,1.1 1.1,1.1 5.4,0 10.8,0 16.2,0 3.5,0 6.4,2.6 6.9,6.1 0.5,3.3 -1.6,6.6 -4.9,7.7 -0.8,0.3 -1.7,0.4 -2.6,0.4 -5.2,0 -10.4,0 -15.6,0 -0.9,0 -1.2,0.2 -1.2,1.1 0,6.1 0,12.2 0,18.2 0,0.8 0.2,1.1 1.1,1.1 5.4,0 10.8,0 16.2,0 3.5,0 6.4,2.6 6.9,6.1 0.5,3.3 -1.6,6.6 -4.8,7.7 -0.8,0.3 -1.7,0.4 -2.6,0.4 -5.1,0 -10.2,0 -15.4,0 -1,0 -1.4,0.2 -1.4,1.4 0.1,5.2 0,10.4 0,15.6 0,9.8 -7.4,17.1 -17.2,17.1 -5.2,0 -10.5,0 -15.7,0 -0.9,0 -1.2,0.2 -1.2,1.2 0,5.1 0.1,10.2 0,15.2 0,3.3 -2.3,6 -5.5,6.7 -3.1,0.7 -6.3,-0.8 -7.8,-3.6 -0.6,-1.1 -0.8,-2.3 -0.8,-3.6 0,-4.9 0,-9.8 0,-14.6 0,-0.9 -0.2,-1.3 -1.2,-1.3 -6,0.1 -12,0.1 -18,0 -1,0 -1.2,0.3 -1.2,1.3 0,5 0,9.9 0,14.9 0,3.8 -2.8,6.8 -6.5,7.1 -3.7,0.3 -6.9,-2.2 -7.6,-5.9 -0.1,-0.5 -0.1,-1.1 -0.1,-1.7 0,-4.9 0,-9.8 0,-14.6 0,-0.8 -0.2,-1.1 -1.1,-1.1 -2.7,0.4 -5.9,0.3 -9,0.3 z" id="path11" inkscape:connector-curvature="0" style="fill:#363636" /><path class="st2" d="m 633.7,571.42436 c 20,0 40.1,0 60.1,0 1.1,0 1.5,0.2 1.5,1.4 0,40.1 0,80.2 0,120.3 0,1.1 -0.2,1.4 -1.4,1.4 -40.2,0 -80.3,0 -120.5,0 -1,0 -1.3,-0.2 -1.3,-1.3 0,-40.2 0,-80.4 0,-120.6 0,-1.1 0.4,-1.3 1.4,-1.3 20.1,0.1 40.2,0.1 60.2,0.1 z" id="path13" inkscape:connector-curvature="0" style="fill:#fefefe" /><path class="st1" d="m 634.1,673.42436 c -7.6,0 -15.3,0 -22.9,0 -8.3,0 -15,-5.3 -16.8,-13.5 -0.2,-1.1 -0.4,-2.3 -0.4,-3.4 0,-15.4 0,-30.9 0,-46.3 0,-9.5 7.5,-16.9 17,-16.9 15.4,0 30.8,0 46.2,0 9.5,0 17,7.5 17,17 0,15.4 0,30.8 0,46.2 0,9.6 -7.5,17 -17,17 -7.8,-0.1 -15.4,-0.1 -23.1,-0.1 z" id="path15" inkscape:connector-curvature="0" style="fill:#363636" /> </svg> </body> </html>

解决方案2
 17  2019-12-05 04:29:46

I made this codepen that might help others who don't want to deal with drawing tools: 我制作了这个代码笔，它可能会帮助不想使用绘图工具的其他人：

https://codepen.io/Steve6886/pen/abzzdOG https://codepen.io/Steve6886/pen/abzzdOG

EDIT: Here's a more up-to-date version of my previous codepen solution: https://svgcrop.com编辑：这是我以前的 codepen 解决方案的更新版本： https ://svgcrop.com

// USER: Set either a width OR height (will scale evenly)
const WIDTH = 100;
const HEIGHT = null;

// Grab the SVG and remove any existing viewBox
const svg = document.querySelector('svg');
svg.removeAttribute('viewBox');

// Set default coordinates
const coords = {
  top: Infinity,
  left: Infinity,
  bottom: -Infinity,
  right: -Infinity
}; 

// Filter SVG to visible elements
filterize = newSvg => {
  const newest = [...newSvg.children].filter(x => x.tagName !== 'defs' && x.tagName !== 'style' && x.tagName !== 'title' && x.tagName !== 'desc');
  if ((newest.length === 1 && newest.childElementCount > 0) || newest[0].tagName === 'g') {
    return filterize(newest[0]);  
  }  

  return newest.filter(x => (x.getBoundingClientRect().top !== 0 && x.getBoundingClientRect().left !== 0 && x.getBoundingClientRect().bottom !== 0 && x.getBoundingClientRect().right !== 0));
  
} 

// Get coordinates of SVG elements
filterize(svg).forEach(x => {
  const {top, left, bottom, right} = x.getBoundingClientRect();
  if (top < coords.top) {
    coords.top = x.getBoundingClientRect().top;
  }
  if (left < coords.left) {
    coords.left = x.getBoundingClientRect().left;
  }
  if (right > coords.right) {
    coords.right = x.getBoundingClientRect().right;
  }
  if (bottom > coords.bottom) {
    coords.bottom = x.getBoundingClientRect().bottom;
  }
}); 

// Set viewBox based on coordinates
svg.setAttribute('viewBox', `${coords.left.toFixed(2)} ${coords.top.toFixed(2)} ${(coords.right - coords.left).toFixed(2)} ${(coords.bottom - coords.top).toFixed(2)}`);

// Set given width OR height
WIDTH && svg.setAttribute('width', WIDTH);
HEIGHT && svg.setAttribute('height', HEIGHT);  

// Add textarea with new SVG code to copy
const textarea = document.createElement('textarea');
textarea.style = `display:block;margin-top:2rem;width:100%;padding:0;min-height:calc(100vh - ${getComputedStyle(svg).height} - 2rem);`;
textarea.innerHTML = svg.outerHTML;
document.body.appendChild(textarea);

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 删除 svg 周围的空间 - remove space around svg 如何编辑SVG以删除形状周围的空白空间？ - How do I edit an SVG to remove the empty space around the shape? 如何摆脱包装纸周围的空白？ - How to get rid of blank space around the wrapper? WooCommerce-如何删除空白 - WooCommerce - How to remove blank space 为什么SVG周围有空间？ - Why is there Space around SVG? 如何去除整个网页周围的空白 - How to remove white space around entire webpage HTML：元素周围的空白，如何去除？ - HTML: white space around elements, how to remove? 如何删除页脚下方的空白区域？ - How to remove blank white space below footer? 如何从网站删除空白？ - How to remove blank space from website? 如何删除页面顶部的空白？ - How to remove blank space on top of page?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM