Question

我有 4 个 svg。我想将 4 个 svg 显示为单个 <img>，这意味着假设图像有 4 个相等的部分，第一部分有 1 个 svg，img 标签的第二部分有第二个 svg，依此类推... 4 SVG 例如：

<svg width="488px" height="531px">....</svg>
<svg width="350px" height="455px">....</svg>
<svg width="560px" height="620px">....</svg>
<svg width="395px" height="421px">....</svg>

<img src= SHOULD BE BELOW IMAGE/>

Answer 1

就像评论说的；将它们组合在一个 SVG 中

你可以自动化。

创建您自己的 <svg-grid> Web 组件（所有现代浏览器都支持）

    <svg-grid>
      <svg width="48px" height="53px"></svg>
      <svg width="65px" height="45px"></svg>
      <svg width="56px" height="32px"></svg>
      <svg width="39px" height="42px"></svg>
    </svg-grid>

该组件读取所有 4 个 SVG 儿童
- 记录宽度/高度
- 记录它的外部HTML
计算编译 SVG 所需的宽度/高度
创建新的 SVG
添加 4 个计算平移位置的 SVG，使它们都围绕中间对齐
用创建的 IMG 覆盖<svg-grid> innerHTML

所有需要输出的代码：

<script>
  customElements.define('svg-grid', class extends HTMLElement {
    connectedCallback() {
      setTimeout(() => { // make sure all DOM SVG children are parsed
        let colors = ["red", "green", "gold", "blue", "purple"];
        let rect = i => `<rect width='100%' height='100%' fill='${colors[i]}'></rect>`;
        let sizes = [];
        let svgs = [...this.querySelectorAll("svg")].map((svg, idx) => {
          svg.innerHTML = rect(idx) // rect color for testing only
          sizes.push({
            width: svg.width.baseVal.value,
            height: svg.height.baseVal.value,
          });
          return svg.outerHTML;
        });
        let max = (x, y, wh) => Math.max(sizes[x][wh], sizes[y][wh]);
        let c1w = max(0, 2, "width"); // column1width
        let c2w = max(1, 3, "width"); // column2width
        let r1h = max(0, 1, "height"); // row1height
        let r2h = max(2, 3, "height"); // row2height
        let grect = (nr,x,y) => `<g transform='translate(${x} ${y})'>${svgs[nr]}</g>`;
        let svg = `<svg width='${c1w+c2w}' height='${r1h+r2h}' xmlns='http://www.w3.org/2000/svg'>` +
          rect(4) + // extra background rect
          grect( 0 , c1w-sizes[0].width , r1h-sizes[0].height ) +
          grect( 1 , c1w                , r1h-sizes[1].height ) +
          grect( 2 , c1w-sizes[2].width , r1h                 ) +
          grect( 3 , c1w                , r1h                 ) +
          `</svg>`;
        // this.innerHTML = svg; // if you want the bare SVG
        this.innerHTML = `<img src="data:image/svg+xml,${svg.replace(/"/g,"'").replace(/#/g, '%23')}">`;
      })
    }
  });
</script>
<style> svg-grid img{ width:260px } </style>
<svg-grid>
  <svg width="48px" height="53px"></svg>
  <svg width="65px" height="45px"></svg>
  <svg width="56px" height="32px"></svg>
  <svg width="39px" height="42px"></svg>
</svg-grid>

Answer 2

<svg width="500" height="500">

    <image x="20" y="20" width="100" height="100"
        xlink:href='data:image/svg+xml,<svg width="100" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50" fill="rgb(255,0,0)"/></svg>' />

    <image x="100" y="20" width="100" height="100"
        xlink:href='data:image/svg+xml,<svg width="100" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50" fill="rgb(255,255,0)"/></svg>' />

    <image x="20" y="100" width="100" height="100"
        xlink:href='data:image/svg+xml,<svg width="100" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50" fill="rgb(0,255,0)"/></svg>' />

    <image x="100" y="100" width="100" height="100"
        xlink:href='data:image/svg+xml,<svg width="100" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50" fill="rgb(0,255,255)"/></svg>' />

</svg>

svg2 string.../>

...

结果网址：https://stackblitz.com/edit/js-ryh4kb?file=index.html

在单个 img 标签中显示多个 svg

2 个答案: