与 SVG 文件中的其他 SVG 合并后，SVG 格式错误

Question

我在一个 SVG 文件中有一些子 SVG（国家标志）。我想再添加一个，但显示不正确。文件“flags.svg”中缺少中心圆圈中的部分。但如果你查看文件“in2.svg”，该标志显示得很好。

我能想到发生这种情况的唯一原因是因为它有一个 viewbox 属性。其他子 SVG 则不然。真的吗？我该如何解决它？

运行代码片段看看我的意思。

flags.svg:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 2000">
   <view id="it" viewBox="0    0 750 500" />
   <view id="nl" viewBox="0  500 750 500" />
   <view id="en" viewBox="0 1000 750 500" />
   <view id="in" viewBox="0 1500 750 500" />
   
   <svg width="750" height="500" y="0">
      <path d="M0 0h750v500H0z" style="fill:#009246;fill-opacity:1;stroke:none"/>
      <path d="M250 0h500v500H250Zm0 0" style="stroke:none;fill-rule:nonzero;fill:#fff;fill-opacity:1"/>
      <path d="M500 0h250v500H500Zm0 0" style="stroke:none;fill-rule:nonzero;fill:#ce2b37;fill-opacity:1"/>
   </svg>
   <svg width="750" height="500" y="500">
      <path d="M0 0h750v500H0z" style="fill:#21468b;fill-opacity:1;stroke:none"/>
      <path d="M0 0h750v333.332H0Zm0 0" style="stroke:none;fill-rule:nonzero;fill:#fff;fill-opacity:1"/>
      <path d="M0 0h750v166.668H0Zm0 0" style="stroke:none;fill-rule:nonzero;fill:#ae1c28;fill-opacity:1"/>
   </svg>
   <svg width="750" height="500" y="1000">
      <defs>
         <clipPath id="a">
            <path d="M375 250h375v250Zm0 0v250H0Zm0 0H0V0Zm0 0V0h375Zm0 0"/>
         </clipPath>
      </defs>
      <path d="M0 0h750v500H0z" style="fill:#00247d;fill-opacity:1;stroke:none"/>
      <path d="m0 0 60 40m0-40L0 40" style="fill:none;stroke-width:6.932255;stroke-linecap:butt;stroke-linejoin:miter;stroke:#fff;stroke-opacity:1;stroke-miterlimit:4" transform="scale(12.5)"/>
      <g clip-path="url(#a)">
         <path d="m0 0 60 30m0-30L0 30" style="fill:none;stroke-width:4;stroke-linecap:butt;stroke-linejoin:miter;stroke:#cf142b;stroke-opacity:1;stroke-miterlimit:4" transform="scale(12.5 16.66667)"/>
      </g>
      <path d="M30 0v40M0 20h60" style="fill:none;stroke-width:11.553759;stroke-linecap:butt;stroke-linejoin:miter;stroke:#fff;stroke-opacity:1;stroke-miterlimit:4" transform="scale(12.5)"/>
      <path d="M30 0v40M0 20h60" style="fill:none;stroke-width:6.932255;stroke-linecap:butt;stroke-linejoin:miter;stroke:#cf142b;stroke-opacity:1;stroke-miterlimit:4" transform="scale(12.5)"/>
   </svg>
   <svg width="750" height="500" y="1500">
      <path d="M0 0h750v500H0z" style="fill:#ffce00;fill-opacity:1;stroke:none"/>
      <path d="M0 0h750v333.332H0Zm0 0" style="stroke:none;fill-rule:nonzero;fill:#d00;fill-opacity:1"/>
      <path d="M0 0h750v166.668H0Zm0 0" style="stroke:none;fill-rule:nonzero;fill:#000;fill-opacity:1"/>
   </svg>
 
<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="750" height="500" y="1500" viewBox="-45 -30 90 60" fill="#07038D">
  <path fill="#FFF" d="M-45-30h90v60h-90z"/>
  <path fill="#FF6820" d="M-45-30h90v20h-90z"/>
  <path fill="#046A38" d="M-45 10h90v20h-90z"/>
  <circle r="9.25"/>
  <circle fill="#FFF" r="8"/>
  <circle r="1.6"/>
  <g id="d">
    <g id="c">
      <g id="b">
        <g id="a">
          <path d="m0-8 .3 4.814L0-.802l-.3-2.384z"/>
          <circle transform="rotate(7.5)" r=".35" cy="-8"/>
        </g>
        <use xlink:href="#a" transform="scale(-1)"/>
      </g>
      <use xlink:href="#b" transform="rotate(15)"/>
    </g>
    <use xlink:href="#c" transform="rotate(30)"/>
  </g>
  <use xlink:href="#d" transform="rotate(60)"/>
  <use xlink:href="#d" transform="rotate(120)"/>
</svg>
</svg>

in2.svg：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="750" height="500" viewBox="-45 -30 90 60" fill="#07038D">
  <path fill="#FFF" d="M-45-30h90v60h-90z"/>
  <path fill="#FF6820" d="M-45-30h90v20h-90z"/>
  <path fill="#046A38" d="M-45 10h90v20h-90z"/>
  <circle r="9.25"/>
  <circle fill="#FFF" r="8"/>
  <circle r="1.6"/>
  <g id="d">
    <g id="c">
      <g id="b">
        <g id="a">
          <path d="m0-8 .3 4.814L0-.802l-.3-2.384z"/>
          <circle transform="rotate(7.5)" r=".35" cy="-8"/>
        </g>
        <use xlink:href="#a" transform="scale(-1)"/>
      </g>
      <use xlink:href="#b" transform="rotate(15)"/>
    </g>
    <use xlink:href="#c" transform="rotate(30)"/>
  </g>
  <use xlink:href="#d" transform="rotate(60)"/>
  <use xlink:href="#d" transform="rotate(120)"/>
</svg>

Answer 1

正如@enxaneta所说，印度国旗SVG中的id在将它们添加到其他SVG后不再是唯一的。

更改 ID 解决了问题。

<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="750" height="500" y="3000" viewBox="-45 -30 90 60" fill="#07038D">
  <path fill="#FFF" d="M-45-30h90v60h-90z"/>
  <path fill="#FF6820" d="M-45-30h90v20h-90z"/>
  <path fill="#046A38" d="M-45 10h90v20h-90z"/>
  <circle r="9.25"/>
  <circle fill="#FFF" r="8"/>
  <circle r="1.6"/>
  <g id="dw">
    <g id="cw">
      <g id="bw">
        <g id="aw">
          <path d="m0-8 .3 4.814L0-.802l-.3-2.384z"/>
          <circle transform="rotate(7.5)" r=".35" cy="-8"/>
        </g>
        <use xlink:href="#aw" transform="scale(-1)"/>
      </g>
      <use xlink:href="#bw" transform="rotate(15)"/>
    </g>
    <use xlink:href="#cw" transform="rotate(30)"/>
  </g>
  <use xlink:href="#dw" transform="rotate(60)"/>
  <use xlink:href="#dw" transform="rotate(120)"/>
</svg>