Adobe Illustrator svg 格式

Question

所以我想知道 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 属性?

Answer 1

在这里你可以找到关于 svg 路径行命令的很好的解释： https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths

大写字母表示绝对坐标，小写字母表示相对坐标。

基于此，两个示例生成相同的矩形。

1) d="M 0 768.375 l 1366 0 l 0 768.375 l -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" 变换="translate(0 -768.375)"

移动到绝对坐标 (x = 0, y = 768.375)
水平移动到绝对坐标(x = 1366)
垂直移动到绝对坐标(y = 1536.75)
水平移动到绝对坐标 (x = 0)
关闭路径，回到起点

Illustrator 只做了相对-> 绝对的变换。在您的第一个示例中，矩形不在 viewBox="0 0 1366 768.375" 中，我认为应用转换是为了在视觉上将矩形移回 (x = 0, y = 0);

Adobe Illustrator svg 格式

Adobe Illustrator svg forrmat

svg

adobe-illustrator