在嵌套的SVG中，内部图标被截断

Question

我的挑战是获取两个随机的svg图标，并将它们拼接在一起，以使内部的图标位于整个图像的左下象限。感谢先前的回答，我有一个执行此操作的框架，但是除非我进行手动更改，否则内部图标将被截断。我需要以编程方式执行此操作，所以问题就变成了，从算法上来说，我如何知道将B视口放大多少？

如果这是图标A：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 100 100">
    <rect width="100%" height="100%" style="fill:rgb(255,0,0);stroke-width:3; stroke:rgb(0,0,0)"
</svg>

这是图标B的一个最小但相当准确的示例：

<svg height="512pt" viewBox="-51 0 512 512.00253" width="512pt" xmlns="http://www.w3.org/2000/svg">
    <rect width="100%" height="100%" style="fill:rgb(0,0,255);stroke-width:30; stroke:rgb(0,0,0)" />
</svg>

这是将它们组合在一起的框架：

<svg viewBox="0 0 100 100">

<defs>
<symbol id="A" viewBox="0 0 100 100"> <!-- making viewbox of symbol A
                                           match viewbox on contained
                                           svg element, which works -->

%ENTIRE CONTENTS OF SVG A%

</symbol>

<symbol id="B" viewBox="51 0 512 512"> <!-- making viewbox of symbol B
                                           match viewbox on contained
                                           svg element, which truncates -->

%ENTIRE CONTENTS OF SVG B%

</symbol>
</defs> 

  <use xlink:href="#A" x="0" y="0" width="100" height="100" />
  <use xlink:href="#B" x="0" y="50" width="50%" height="50%" />

</svg>

这是当前的svg：

<svg viewBox="0 0 100 100">

<defs>
<symbol id="A" viewBox="0 0 100 100">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 100 100">
  <rect width="100%" height="100%" style="fill:rgb(255,0,0);stroke-width:3; stroke:rgb(0,0,0)"
  </svg>

</symbol>

<symbol  id="B" viewBox="51 0 512 512">
<svg height="512pt" viewBox="-51 0 512 512.00253" width="512pt" xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" style="fill:rgb(0,0,255);stroke-width:30; stroke:rgb(0,0,0)" />
  </svg>

</symbol>
</defs> 

  <use xlink:href="#A" x="0" y="0" width="100" height="100" />
  <use xlink:href="#B" x="0" y="50" width="50%" height="50%" />

</svg>

这就是看起来的样子。注意截断；内部图标在右侧和底部都被压缩。

我可以像这样手动调整它，结果如下。但是我无法手动调整这些内容。

<svg viewBox="0 0 100 100">

<defs>
<symbol id="A" viewBox="0 0 100 100">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 100 100">
  <rect width="100%" height="100%" style="fill:rgb(255,0,0);stroke-width:3; stroke:rgb(0,0,0)"
  </svg>

</symbol>

<!-- Note this pair of 680 values, and the 0 x-pos on the line below -->
<symbol  id="B" viewBox="0 0 680 680">
<svg height="512pt" viewBox="0 0 512 512.00253" width="512pt" xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" style="fill:rgb(0,0,255);stroke-width:30; stroke:rgb(0,0,0)" />
  </svg>

</symbol>
</defs> 

  <use xlink:href="#A" x="0" y="0" width="100" height="100" />
  <use xlink:href="#B" x="0" y="50" width="50%" height="50%" />

</svg>

请注意，符号B视图框上已调整的“ 680”硬件。 （还要调整内部svg上的视图框，以将X位置移动到0，这让我真的很不高兴）。 “ 680”号是通过实验确定的，只有当这是一次性交易而不是我不需要系统化的交易时，这才是好的。我怎么知道以编程方式创建该视图框的大小？

Answer 1

从内部SVG中删除width和height属性

svg{width:90vh}

<svg viewBox="0 0 100 100">

<defs>
<symbol id="A" viewBox="0 0 100 100">
<svg viewBox="0 0 100 100">
  <rect width="100%" height="100%" style="fill:rgb(255,0,0);stroke-width:3; stroke:rgb(0,0,0)" />
  </svg>

</symbol>

<symbol  id="B" viewBox="0 0 512 512">
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" style="fill:rgb(0,0,255);stroke-width:30; stroke:rgb(0,0,0)" />
  </svg>

</symbol>
</defs> 

  <use xlink:href="#A" x="0" y="0" width="100" height="100" />
  <use xlink:href="#B" x="0" y="50" width="50" height="50" />

</svg>

更新

OP声明他们无法从内部SVG中删除width和height属性。在这种情况下，我需要添加几行JavaScript。首先，我需要获取第二个SVG画布的大小（以px为单位）。

const pt = 96/72;
let size = 512 * pt;

我还需要知道笔划宽度

let strokeWidth = 30 * pt; 

接下来，我需要为##``

重置viewBox属性的值

const pt = 96/72;
let size = 512 * pt;
let strokeWidth = 30 * pt;
B.setAttributeNS(null,"viewBox", `-${strokeWidth/2} -${strokeWidth/2} ${size+strokeWidth} ${size+strokeWidth}`)

<svg viewBox="0 0 100 100">

<defs>
<symbol id="A" viewBox="0 0 100 100">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 100 100">
  <rect width="100%" height="100%" style="fill:rgb(255,0,0);stroke-width:3; stroke:rgb(0,0,0)" />
  </svg>

</symbol>

<symbol  id="B" viewBox="0 0 512 512">
<svg height="512pt" viewBox="0 0 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" style="fill:rgb(0,0,255);stroke-width:30; stroke:rgb(0,0,0)" />
  </svg>

</symbol>
</defs> 

  <use xlink:href="#A" x="0" y="0" width="100" height="100" />
  <use xlink:href="#B" x="0" y="50" width="50%" height="50%" />

</svg>