如何使用`use`在SVG中缩放/挤压三角形符号答案

【问题标题】：How to scale/squish triangle symbol in SVG using `use`如何使用`use`在SVG中缩放/挤压三角形符号
【发布时间】：2019-04-20 20:38:49
【问题描述】：

我有以下系统：

<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 三角形成比例的随机大小。

想知道如何让它缩放/压缩图像，以便我可以多次使用 use 并让它显示具有相同宽度的不同高度的树。

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

    <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" />

【问题讨论】：

标签： html css svg scaling

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

【讨论】：