使图稿适合边界预处理的 SVG 脚本

Question

我当前的工作流程是从服务器获取 svg 并执行一些繁重的任务以将它们放入我的网页。我现在唯一的问题是我正在抓取的 svg 没有紧紧地拥抱他们的艺术作品边界，有没有一种自动化的方式可以让我裁剪它们以完全适合他们的边界，而无需直接在 illustrator 中进行？最好是grunt/node相关的。我无权访问源 svg，因此无法对它们进行操作。

我有什么

我需要什么

Answer 1

对于您示例中的相对简单的 svg，您可以获取 svg 的边界框，然后根据边界框设置 svg 的宽度、高度和 viewBox 属性。例如，假设您有以下 svg...

<svg id="mySvg" height="200" width="200" xmlns="http://www.w3.org/2000/svg">
    <path fill="black" stroke="none" d="M 40 20 L 160 100 L 40 180 L 20 160 L 120 100 L 20 40 Z"/>
</svg>

那么你可以使用下面的代码...

var svg = document.getElementById("mySvg");
var bbox  = svg.getBBox();
svg.setAttribute("width", bbox.width);
svg.setAttribute("height", bbox.height);
svg.setAttribute("viewBox", bbox.x + " " + bbox.y + " " + bbox.width + " " + bbox.height);

请注意，此方法有一些局限性。 getBBox() 方法的返回值不包括描边、剪裁、遮罩和过滤。如果您的 svg 包含宽描边或阴影（通过过滤），那么您必须调整上面的代码以向边界框添加一些额外的 space。

Answer 2

好的，所以我创建了一个带有 grunt 包装器的节点包，它完全按照 Bobby 所说的进行渲染，以幻像呈现，获取 bbox 并再次设置尺寸，然后保存 svg，如果其他人想使用它就在这里.

https://github.com/mikemellor11/grunt-svgfit

使图稿适合边界预处理的 SVG 脚本

SVG script to fit artwork to bounds pre process

svg

automation

node.js

gruntjs