RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / 问题 / 627684
Accepted
cronfy
cronfy
Asked:2020-02-14 19:12:06 +0000 UTC2020-02-14 19:12:06 +0000 UTC 2020-02-14 19:12:06 +0000 UTC

SVG:自动删除边距填充

  • 772

我遇到了网站布局的问题。我有一排 SVG 图标,看起来像这样:

在此处输入图像描述

问题是图像本身周围一直存在填充。我不想有这些填充,因为有了它们,每个图标在放置在元素上时,都必须在 css 中调整大小和位置。

我知道如何使用 Inkscape 去除这些缩进。不过这个是手工制作的,还有很多图标。

是否有一些实用程序可以自动删除这些缩进?最好在 Linux 下(节点,python 都可以)。

SVG 示例:要点

css
  • 4 4 个回答
  • 10 Views

4 个回答

  • Voted
  1. Alexandr_TT
    2020-02-14T20:45:47Z2020-02-14T20:45:47Z

    viewport你可以使用and快速去除缩进viewBox 例如有这样一个图标

    <svg version="1" xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96"
     style="border:1px solid crimson" >
        <g fill="#00BCD4">
            <rect x="37" y="18" width="6" height="24"/>
            <rect x="29" y="26" width="6" height="16"/>
            <rect x="21" y="22" width="6" height="20"/>
            <rect x="13" y="32" width="6" height="10"/>
            <rect x="5" y="28" width="6" height="14"/>
        </g>
        <g fill="#3F51B5">
            <circle cx="8" cy="16" r="3"/>
            <circle cx="16" cy="18" r="3"/>
            <circle cx="24" cy="11" r="3"/>
            <circle cx="32" cy="13" r="3"/>
            <circle cx="40" cy="9" r="3"/>
            <polygon points="39.1,7.2 31.8,10.9 23.5,8.8 15.5,15.8 8.5,14.1 7.5,17.9 16.5,20.2 24.5,13.2 32.2,15.1 40.9,10.8"/>
        </g>
    </svg>
    图标周围的红色边框是范围viewport。这些缩进在插入到 html 中时会被保留。通过更改属性 viewport,viewBox您可以删除缩进。
    下面的示例保持 1:1 的比例,但缩小了视口,填充也几乎减少了。

    <svg version="1" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"
     style="border:1px solid crimson" >
        <g fill="#00BCD4">
            <rect x="37" y="18" width="6" height="24"/>
            <rect x="29" y="26" width="6" height="16"/>
            <rect x="21" y="22" width="6" height="20"/>
            <rect x="13" y="32" width="6" height="10"/>
            <rect x="5" y="28" width="6" height="14"/>
        </g>
        <g fill="#3F51B5">
            <circle cx="8" cy="16" r="3"/>
            <circle cx="16" cy="18" r="3"/>
            <circle cx="24" cy="11" r="3"/>
            <circle cx="32" cy="13" r="3"/>
            <circle cx="40" cy="9" r="3"/>
            <polygon points="39.1,7.2 31.8,10.9 23.5,8.8 15.5,15.8 8.5,14.1 7.5,17.9 16.5,20.2 24.5,13.2 32.2,15.1 40.9,10.8"/>
        </g>
    </svg>

    如果只是需要移动里面的图标viewport,可以使用前两个属性viewBox = "12 0 48 48" -shift to left。更多细节:这里和这里
    如果你的图标是相同类型的,那么通过试验viewport viewBox一个图标的属性,然后你可以自动替换整个图标包的属性,例如,在记事本++

    • 6
  2. Best Answer
    cronfy
    2020-02-16T20:26:07Z2020-02-16T20:26:07Z

    简答

    这是这样一个脚本。

    它需要 PhantomJS 并像这样工作:

    phantomjs svg-padding-remover.js path/to/image.svg > new.svg
    

    长答案

    您可以使用 PhantomJS 在命令行上模拟浏览器。相应地,同时所有可能的浏览器方法都可用于操作SVG (请读者在评论中提供更好的链接)。

    我使用Qwertiy 的答案(感谢您的想法!)来编写这样的命令行脚本。

    如果脚本尽量简化(去掉命令行参数的解析,错误处理),只留下运行原理,会变成这样:

    去除器.js

    // здесь нужно указать путь до картинки
    var fs = require('fs');
    var url = 'file://' + fs.absolute('1.svg');
    
    // открываем файл svg как документ
    var page = require('webpage').create();
    page.open(url, function () {
        // Вызов нашей функции, которая будет выполнена
        // в контексте открытого документа.
        // Она изменит документ (svg) необходимым нам образом.
        page.evaluate(svgPaddingRemover);
    
        // вывод нового содержимого документа
        console.log(page.content);
    
        // выход
        phantom.exit();
    });
    
    // Функция, которая изменяет документ.
    // В данном случае - корректирует viewBox, удаляет width и height.
    var svgPaddingRemover = function () {
        var svg = document.querySelector("svg");
        var svgall = svg.querySelectorAll("*");
        var l = Infinity, t = Infinity, r = -Infinity, b = -Infinity;
    
        for (i = 0; i < svgall.length; i++) {
            var elem = svgall[i];
            var bb = elem.getBBox();
    
            if (bb.width && bb.height) {
                l = Math.min(l, bb.x);
                t = Math.min(t, bb.y);
                r = Math.max(r, bb.x + bb.width);
                b = Math.max(b, bb.y + bb.height);
            }
        }
    
        svg.setAttribute("viewBox", l + ' ' + t + ' ' + (r - l) + ' ' + ' ' + (b - t));
        svg.removeAttribute("width");
        svg.removeAttribute("height");
    };
    

    运行脚本:

    phantomjs remover.js > cropped-image.svg
    
    • 6
  3. Qwertiy
    2020-02-14T21:07:38Z2020-02-14T21:07:38Z

    最简单的选择是这样的:

    document.querySelector("button").addEventListener("click", function () {
      var svg = document.querySelector("svg");
      var l = Infinity, t = Infinity, r = -Infinity, b = -Infinity;
      
      for (var elem of svg.querySelectorAll("*")) {
        var bb = elem.getBBox();
        if (bb.width && bb.height) {
          l = Math.min(l, bb.x);
          t = Math.min(t, bb.y);
          r = Math.max(r, bb.x + bb.width);
          b = Math.max(b, bb.y + bb.height);
        }
      }
      
      svg.setAttribute("viewBox", `${l} ${t} ${r-l} ${b-t}`);
      svg.removeAttribute("width");
      svg.removeAttribute("height");
    });
    p {
      border: 1px solid blue;
    }
    
    svg {
      display: block;
      height: 10em;
      width: auto;
      border: 1px solid red;
    }
    <p>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="836.2px" height="581.1px" viewBox="0 0 836.2 581.1" enable-background="new 0 0 836.2 581.1" xml:space="preserve">
    <g>
    	<g>
    		<g>
    			<path d="M440.4,119.9h-1c-6.7,0-12.1,5.4-12.1,12.1s5.4,12.1,12.1,12.1h1c6.7,0,12.1-5.4,12.1-12.1     C452.5,125.3,447.1,119.9,440.4,119.9z"/>
    			<path d="M657.2,249.3c-4.7-4.7-12.4-4.7-17.1,0l-7.8,7.8l-7.8-7.8c-4.7-4.7-12.4-4.7-17.1,0c-4.7,4.7-4.7,12.4,0,17.1l7.8,7.8     l-7.8,7.8c-4.7,4.7-4.7,12.4,0,17.1c2.4,2.4,5.5,3.5,8.6,3.5c3.1,0,6.2-1.2,8.6-3.5l7.8-7.8l7.8,7.8c2.4,2.4,5.5,3.5,8.6,3.5     s6.2-1.2,8.6-3.5c4.7-4.7,4.7-12.4,0-17.1l-7.8-7.8l7.8-7.8C661.9,261.7,661.9,254,657.2,249.3z"/>
    			<path d="M576,249.3c-4.7-4.7-12.4-4.7-17.1,0l-7.8,7.8l-7.8-7.8c-4.7-4.7-12.4-4.7-17.1,0c-4.7,4.7-4.7,12.4,0,17.1l7.8,7.8     l-7.8,7.8c-4.7,4.7-4.7,12.4,0,17.1c2.4,2.4,5.5,3.5,8.6,3.5s6.2-1.2,8.6-3.5l7.8-7.8l7.8,7.8c2.4,2.4,5.5,3.5,8.6,3.5     c3.1,0,6.2-1.2,8.6-3.5c4.7-4.7,4.7-12.4,0-17.1l-7.8-7.8l7.8-7.8C580.8,261.7,580.8,254,576,249.3z"/>
    			<path d="M666.3,149.5H517.7v-41c0-16.7-7.7-32-21.1-41.9c-13.4-9.9-30.3-12.9-46.3-8c-0.2,0.1-0.3,0.1-0.5,0.2l-76.5,27h-64.1     l-76.5-27c-0.2-0.1-0.3-0.1-0.5-0.2c-16-4.9-32.8-1.9-46.3,8c-13.4,9.9-21.1,25.2-21.1,41.9v41.3c-20.9,2.6-37.2,20.4-37.2,42     v290.5c0,23.4,19,42.4,42.4,42.4h496.4c23.4,0,42.4-19,42.4-42.4V191.9C708.7,168.5,689.7,149.5,666.3,149.5z M387.4,144.1h15.1     c6.7,0,12.1-5.4,12.1-12.1s-5.4-12.1-12.1-12.1h-15.1v-13.4l70.1-24.7c8.5-2.5,17.4-0.9,24.6,4.4c7.2,5.3,11.3,13.5,11.3,22.5     v46.9c0,9-4.1,17.1-11.3,22.5c-7.1,5.3-16.1,6.9-24.6,4.4l-70.1-24.7V144.1L387.4,144.1z M373.2,178.2l41.7,14.7l27.1,46.9     l-13.8-2.4c-5.8-1-11.4,2.3-13.5,7.8l-4.8,13.2l-46.3-80.2L373.2,178.2L373.2,178.2z M319.2,110h44v44h-44V110z M321.9,178.2     l-46.3,80.2l-4.8-13.2c-2-5.5-7.7-8.8-13.5-7.8l-13.8,2.4l27.9-48.3l37.7-13.3L321.9,178.2L321.9,178.2z M189,108.5     c0-9,4.1-17.1,11.3-22.5c4.9-3.6,10.7-5.5,16.6-5.5c2.7,0,5.4,0.4,8,1.2l70.1,24.7v13.4h-53c-6.7,0-12.1,5.4-12.1,12.1     c0,6.7,5.4,12.1,12.1,12.1h53v13.4l-70.1,24.7c-8.5,2.5-17.4,0.9-24.6-4.4c-7.2-5.3-11.3-13.5-11.3-22.5V108.5L189,108.5z      M684.4,482.4c0,10-8.1,18.2-18.2,18.2H169.9c-10,0-18.2-8.1-18.2-18.2v-35.3h532.7L684.4,482.4L684.4,482.4z M684.4,422.9H151.8     v-60.5h532.7L684.4,422.9L684.4,422.9z M684.4,338.2H151.8V191.9c0-9.4,7.2-17.1,16.3-18.1c3.5,9.2,9.5,17.4,17.8,23.5     c9.2,6.8,19.9,10.3,30.9,10.3c5.1,0,10.3-0.8,15.3-2.3c0.2-0.1,0.3-0.1,0.5-0.2l3.7-1.3l-26.7,46.3c-2.3,4.1-2.1,9.1,0.6,13     c2.7,3.9,7.4,5.8,12,5l29.4-5.1l10.2,28c1.6,4.4,5.6,7.5,10.3,7.9c0.4,0,0.7,0,1,0c4.3,0,8.3-2.3,10.5-6.1l59.1-102.5L402,292.9     c2.2,3.8,6.2,6.1,10.5,6.1c0.3,0,0.7,0,1,0c4.7-0.4,8.7-3.5,10.3-7.9l10.2-28l29.4,5.1c4.6,0.8,9.3-1.1,12-5     c2.7-3.9,2.9-8.9,0.6-13l-25.9-44.9c0.1,0,0.1,0,0.2,0.1c5.1,1.5,10.2,2.3,15.3,2.3c11,0,21.8-3.5,30.9-10.3     c8.3-6.1,14.4-14.3,17.8-23.6h151.9c10,0,18.2,8.1,18.2,18.2L684.4,338.2L684.4,338.2z"/>
    		</g>
    	</g>
    </g>
    </svg>
    </p>
    
    <button>Crop</button>

    • 4
  4. MobiDevices
    2020-02-14T20:09:55Z2020-02-14T20:09:55Z

    您可以使用 Gulp 插件 gulp-imagemin 和 imagemin-svgo:

    var
        gulp = require('gulp'),
        imagemin = require('gulp-imagemin'),
        imageminSvgo = require('imagemin-svgo');
    
    gulp.task('imagemin', function() {
        gulp.src('./img/**/*')
            .pipe(imagemin([
                imageminSvgo({
                    plugins: [
                        {removeViewBox: true}
                    ]
                })
            ]))
            .pipe(gulp.dest('./public/img/'))
    });
    
    • 0

相关问题

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    Python 3.6 - 安装 MySQL (Windows)

    • 1 个回答
  • Marko Smith

    C++ 编写程序“计算单个岛屿”。填充一个二维数组 12x12 0 和 1

    • 2 个回答
  • Marko Smith

    返回指针的函数

    • 1 个回答
  • Marko Smith

    我使用 django 管理面板添加图像,但它没有显示

    • 1 个回答
  • Marko Smith

    这些条目是什么意思,它们的完整等效项是什么样的

    • 2 个回答
  • Marko Smith

    浏览器仍然缓存文件数据

    • 1 个回答
  • Marko Smith

    在 Excel VBA 中激活工作表的问题

    • 3 个回答
  • Marko Smith

    为什么内置类型中包含复数而小数不包含?

    • 2 个回答
  • Marko Smith

    获得唯一途径

    • 3 个回答
  • Marko Smith

    告诉我一个像幻灯片一样创建滚动的库

    • 1 个回答
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Алексей Шиманский 如何以及通过什么方式来查找 Javascript 代码中的错误? 2020-08-03 00:21:37 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    user207618 Codegolf——组合选择算法的实现 2020-10-23 18:46:29 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5