1

tl;dr：给定任意 SVG <path>，我如何调整路径命令以设置文件的新原点？

细节

我正在使用 Adob​​e Illustrator 创建用于 Android 的矢量图形。Illustrator 有一个错误，在（未知）情况下，viewBox为您的图形创建的所有坐标与您在 Illustrator 中为画布和对象设置的坐标不匹配。而不是（例如）viewBox="-7 0 14 20"你可能会得到viewBox="-53 75 14 20". 通常路径命令将被翻译以适应该视图框。有时即使这样也失败了。

在普通的 SVG 文件中 (a) 这很少会引起注意，并且 (b) 通过将所有内容包装在根级<g transform="translate(46,-75)">. 在 Android中，VectorDrawable这需要一个<group>我不想添加的额外内容，并且（与 SVG 不同）我无法为其<path>自身添加翻译。在我的代码中，起源很重要。

如何调整 SVG 文件中所有路径的路径命令以将它们偏移固定量，从而允许我将原点放置在我想要的位置？

4

1 回答 1

0

一种transform="translate(…,…)"解决方案是在要调整的每个路径上添加显式，在 Web 浏览器中查看 SVG，使用此问题中的代码[注意：我自己的] 将翻译烘焙到路径数据中，然后使用 Web 检查器获取更改后的值。麻烦。

更好：我创建了一个小型在线工具SVG Reoriginizer [无广告，无收入]，可让您将 SVG 代码粘贴到顶部框中，单击（或使用 alt+shift+箭头键）调整原点，然后查看翻译底部显示的路径命令。

核心代码是这个函数，它将 viewBox 和所有绝对路径命令偏移指定量，并将更改后的 SVG 作为字符串返回：

function offsetOrigin(svg,dx,dy){
  svg.viewBox.baseVal.x -= dx;
  svg.viewBox.baseVal.y -= dy;
  [].forEach.call(svg.querySelectorAll('path'),function(path){
    var segs = path.pathSegList;
    for (var i=segs.numberOfItems;i--;){
      var seg=segs.getItem(i), c=seg.pathSegTypeAsLetter;
      if (/[MLHVCSQTA]/.test(c)){
        if ('x'  in seg) seg.x -=dx;
        if ('y'  in seg) seg.y -=dy;
        if ('x1' in seg) seg.x1-=dx;
        if ('x2' in seg) seg.x2-=dx;
        if ('y1' in seg) seg.y1-=dy;
        if ('y2' in seg) seg.y2-=dy;
      }
    }
  });

  return (new XMLSerializer).serializeToString(svg);
}
于 2015-11-05T00:13:49.203 回答