时间戳

首页 > 解决方案 > 当符号已设置大小和相对位置时缩放 SVG

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

问题描述

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

标签： svgscaling

解决方案

使用 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>

推荐阅读