利用同色直角像素组合缩小SVG

Question

我有一个这样的SVG：

<?xml version="1.0" encoding="UTF-8" ?>
<svg version="1.1" width="68" height="68" xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges">
    <rect x="14" y="24" width="1" height="1" fill="red" />
    <rect x="14" y="24" width="1" height="1" fill="red" />
    <rect x="14" y="24" width="1" height="1" fill="red" />
    <rect x="14" y="24" width="1" height="1" fill="red" />
</svg>

我想把这个改为：

<?xml version="1.0" encoding="UTF-8" ?>
<svg version="1.1" width="68" height="68" xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges">
    <rect x="14" y="24" width="1" height="4" fill="red" />
</svg>

有没有一种自动化的方法来组合相同颜色的Rect并替换它们的宽度和高度？

Answer 1

您可以使用Jarek的<rect>将所有<path>转换为<path>元素，并组合它们的路径命令：

paths

• concatenate

• 搜索不同的填充颜色

• 查询所有填充颜色

• 将rects转换为d属性

​

const svg = document.querySelector("svg");

function mergeByColors(svg) {
  let els = svg.querySelectorAll("path, rect, circle, polygon, ellipse ");

  // find colors
  let colors = [];
  let fills = [];
  els.forEach(function(el, i) {
    let fill = el.getAttribute("fill");
    fills[fill] = [];
    if (colors.indexOf(fill) == -1) {
      colors.push(fill);
    }
  });

  // loop through colors
  for (let i = 0; i < colors.length; i++) {
    let fillEls = svg.querySelectorAll('[fill="' + colors[i] + '"]');
    let pathsCombinedData = "";

    //convert primitives to paths via pathData normalizing
    fillEls.forEach(function(el, i) {
      let pathData = el.getPathData({
        normalize: true
      });
      //remove shape
      el.remove();
      //concatenate path data
      pathData.forEach(function(command, c) {
        pathsCombinedData +=
          " " + command["type"] + "" + command["values"].join(" ");
      });
    });

    // append fill group path
    let pathTmp = document.createElementNS(
      "http://www.w3.org/2000/svg",
      "path"
    );
    pathTmp.setAttribute("fill", colors[i]);
    pathTmp.setAttribute("d", pathsCombinedData);
    svg.appendChild(pathTmp);
  }
}

svg {
  display: inline-block;
  width: 10em
}

path{
opacity:0.7
}

<script src="https://cdn.jsdelivr.net/npm/path-data-polyfill@1.0.3/path-data-polyfill.min.js"></script>

<p>
  <button type="button" onclick="mergeByColors(svg)">Merge rects </button>
</p>

<svg version="1.1" viewBox="0 0 68 68" xmlns="http://www.w3.org/2000/svg">
    <rect x="14" y="24" width="10" height="10" fill="red" />
    <rect x="14" y="34" width="10" height="10" fill="red" />
    <rect x="14" y="44" width="10" height="10" fill="red" />
    <rect x="14" y="54" width="10" height="10" fill="red" />
    <rect x="24" y="54" width="10" height="10" fill="red" />
    <rect x="34" y="24" width="10" height="10" fill="blue" />
    <rect x="34" y="34" width="10" height="10" fill="blue" />
</svg>

​

现在，每个填充颜色都有一个<path>元素。

最后产出：

<svg version="1.1" viewBox="0 0 68 68" xmlns="http://www.w3.org/2000/svg">
  <path fill="red" d=" M14 24 L24 24 L24 34 L14 34 L14 24 Z M14 34 L24 34 L24 44 L14 44 L14 34 Z M14 44 L24 44 L24 54 L14 54 L14 44 Z M14 54 L24 54 L24 64 L14 64 L14 54 Z M24 54 L34 54 L34 64 L24 64 L24 54 Z" />
  <path fill="blue" d=" M34 24 L44 24 L44 34 L34 34 L34 24 Z M34 34 L44 34 L44 44 L34 44 L34 34 Z" />
</svg>