Как масштабировать / сжимать символ треугольника в SVG, используя `use` - PullRequest
Новая
       6

Как масштабировать / сжимать символ треугольника в SVG, используя `use`

0 голосов
/ 20 апреля 2019

У меня есть следующая система: 

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

1 Ответ

1 голос
/ 21 апреля 2019

Добавьте 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>
...