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

想知道如何缩放/压缩图像，这样我可以多次使用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" />

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`

1 个答案: