Adobe Illustrator svg forrmat - PullRequest
Новая
       25

Adobe Illustrator svg forrmat

0 голосов
/ 29 октября 2018

Итак, я хотел знать, как Adobe Illustrator экспортирует SVG, а затем я создал свой собственный SVG: 

<svg class="canvas-slider" viewBox="0 0 1366 768.375">
  <defs>
    <style>
      .canvas-slider-path {
        fill: url(#linear-gradient);
      }
    </style>
    <linearGradient id="linear-gradient" y1="383.75" x2="1366" y2="383.75" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#2ad8ff"/>
      <stop offset="1" stop-color="#2a61ff"/>
    </linearGradient>
  </defs>
  <path class="canvas-slider-path" d="M 0 768.375 l 1366 0 l 0 768.375 l -1366 0 Z"/>
</svg>

, не меняя ничего, я попытался открыть его в Adobe Illustrator, а затем сразу же экспортировать как svg, а затем заметил изменение кода на: 

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1366" height="768.375" viewBox="0 0 1366 768.375">
  <defs>
    <style>
      .cls-1 {
        fill: url(#linear-gradient);
      }
    </style>
    <linearGradient id="linear-gradient" y1="-384.5625" x2="1366" y2="-384.5625" gradientTransform="matrix(1, 0, 0, -1, 0, 768)" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#2ad8ff"/>
      <stop offset="1" stop-color="#2a61ff"/>
    </linearGradient>
  </defs>
  <title>test</title>
  <path class="cls-1" d="M0,768.375H1366V1536.75H0Z" transform="translate(0 -768.375)"/>
</svg>

Может кто-нибудь объяснить мне изменения в свойстве d из path? а также почему у него есть свойство transform?

1 Ответ

0 голосов
/ 29 октября 2018

Здесь вы можете найти отличное объяснение команд строки пути svg: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths

Прописные буквы указывают абсолютные координаты, строчные буквы указывают относительные координаты.

Исходя из этого, в двух примерах получаются идентичные прямоугольники.

1) d = "M 0 768,375 л 1366 0 л 0 768,375 л -1366 0 Z"

  • Переход к абсолютным координатам (x = 0, y = 768.375)
  • Нарисуйте относительную линию, сдвиньте вправо на (x = 1366, y = 0)
  • Нарисуйте относительную линию, сдвиньтесь вниз (x = 0, y = 768.375)
  • Нарисуйте относительную линию, сдвиньте влево на (x = 1366 (отрицательный знак показывает, что мы возвращаемся), y = 0)
  • Закрыть путь, вернуться к начальной точке

2) d = "M 0, 768,375 H 1366 V 1536,75 H 0 Z" transform = "translate (0 -768.375)"

  • Переход к абсолютным координатам (x = 0, y = 768.375)
  • Перемещение по горизонтали к абсолютной координате (х = 1366)
  • Перемещение по вертикали в абсолютную координату (y = 1536,75)
  • Перемещение по горизонтали в абсолютную координату (x = 0)
  • Закрыть путь, вернуться к начальной точке

Illustrator только сделал относительное -> абсолютное преобразование. В вашем первом примере прямоугольник отсутствует в viewBox = "0 0 1366 768.375", и я думаю, что преобразование было применено для визуального перемещения прямоугольника обратно в (x = 0, y = 0);

...