如何使用 `use` 在 SVG 中 scale/squish 三角形符号

Question

我有以下系统：

<html>
  <head>
    <style>
      html, body {
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3000 3000">
      <defs>
        <symbol id="triangle" viewBox="0 0 100 100">
          <polygon points="0,100 50,0 100,100" class="triangle" />
        </symbol>

        <symbol id="tree" viewBox="0 0 100 100">
          <use href="#triangle" width="100" height="100" />
        </symbol>
      </defs>

      <use href="#tree" width="200" height="400" x="1000" />
      <use href="#tree" width="100" height="100" x="1100" />
    </svg>
  </body>
</html>

对于以下内容：

<use href="#tree" width="200" height="400" x="1000" />

我希望它是一个三角形，高度是宽度的两倍 (200x400)。但它最终只是一个与原始 100x100 三角形成比例的随机大小。

想知道如何将它变成 scale/squish 图像，以便我可以多次使用 use 并让它显示不同高度的树，所有树的宽度都相同。

与制作一个 #rect 符号相同，您可以使用任何 width/height 调整大小，它会创建一个适当形状的矩形。如果我尝试以下操作，它只会显示一个正方形。

    <symbol id="rect" viewBox="0 0 100 100">
      <rect width='100' height='100' />
    </symbol>

    <use href="#rect" width="400" height="300" x="1300" y="1000" />

Answer 1

将 preserveAspectRatio="none" 添加到您的符号元素。

<html>
  <head>
    <style>
      html, body {
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3000 3000">
      <defs>
        <symbol id="triangle" viewBox="0 0 100 100" preserveAspectRatio="none">
          <polygon points="0,100 50,0 100,100" class="triangle" />
        </symbol>

        <symbol id="tree" viewBox="0 0 100 100" preserveAspectRatio="none">
          <use href="#triangle" width="100" height="100" />
        </symbol>
        
        <symbol id="rect" viewBox="0 0 100 100" preserveAspectRatio="none">
          <rect width='100' height='100' />
        </symbol>
      </defs>

      <use href="#tree" width="200" height="400" x="1000" />
      <use href="#tree" width="100" height="100" x="1100" />
      <use href="#rect" width="400" height="300" x="1300" y="1000" />
    </svg>
  </body>
</html>

如何使用 `use` 在 SVG 中 scale/squish 三角形符号

How to scale/squish triangle symbol in SVG using `use`

html

css

scaling

svg