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

【问题标题】：Scaling SVG when symbols have set size and relative position当符号已设置大小和相对位置时缩放 SVG
【发布时间】：2021-09-03 17:21:24
【问题描述】：

我已经被困在这个问题上几天了，所以我想我会伸出手来看看是否有人遇到过类似的事情。我正在尝试将多个符号组合到一个 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>

【问题讨论】：

标签： svg scaling

【解决方案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>

【讨论】：