当符号设置大小和相对位置时缩放 SVG

Question

我已经坚持了几天，所以我想我会伸出援手，看看是否有人运行有类似的东西。我正在尝试将多个符号合并到一个 SVG 文件中。我能够组合文件中的符号，并且图形看起来完全符合我的要求。问题是生成的 SVG 不会自动调整大小。这是因为符号具有设定的宽度和高度。如果我删除符号上的宽度和高度，它们会调整大小，但我会失去我想要的定位和大小比例。在 SVG 上设置宽度或高度不会影响符号的大小。

我希望能够设置 SVG 的宽度和高度，这会导致符号相应地调整大小，同时保持相对位置。如果您在浏览器中放大图像，您会得到同样的效果。我正在使用的符号有点太复杂，无法用作示例，但这里是同一问题的一个非常基本的示例。生成的图像不会调整为 SVG 中设置的 100% 宽度。感谢任何帮助。

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%">
      <symbol id="svg23" viewBox="0 0 20 20" height="50" width="50" >
        <rect width="20" height="20" />
      </symbol>
      <symbol id="svg20" viewBox="0 0 30 30" height="50" width="50" >
        <rect width="30" height="30" />
      </symbol>
      <use href="#svg23" />
      <use href="#svg20" x="100" y="0" />
</svg>

Answer 1

使用 viewBox 来控制 SVG 中的相对位置是有意义的。然后您可以将 SVG 的宽度设置为特定的值，或者如果它应该填充 100%，则将其保留。

<p>Width of 100%:</p>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 500 50">
      <symbol id="svg23" viewBox="0 0 20 20" height="50" width="50" >
        <rect width="20" height="20" />
      </symbol>
      <symbol id="svg20" viewBox="0 0 30 30" height="50" width="50" >
        <rect width="30" height="30" />
      </symbol>
      <use href="#svg23" />
      <use href="#svg20" x="100" y="0" />
</svg>
<p>Smaller (width of 200 px):</p>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200px" viewBox="0 0 500 50">
      <symbol id="svg23" viewBox="0 0 20 20" height="50" width="50" >
        <rect width="20" height="20" />
      </symbol>
      <symbol id="svg20" viewBox="0 0 30 30" height="50" width="50" >
        <rect width="30" height="30" />
      </symbol>
      <use href="#svg23" />
      <use href="#svg20" x="100" y="0" />
</svg>

当符号设置大小和相对位置时缩放 SVG

Scaling SVG when symbols have set size and relative position

scaling

svg