javascript - 为什么变换会移动整个坐标系而不是仅仅移动 SVG 中的元素？

Question

我看到在 SVG 中转换图形不会影响要转换的对象，而是转换整个坐标系，然后在该系统中绘制元素。

这有助于实现什么，而不是为考虑中的当前元素计算新坐标？

我认为在 canvas 和 CSS 中，它的行为相同，所以也标记 javascript 和 CSS。

Answer 1

我不确定我是否理解您的问题，但让我试试:

1. 转换后的元素可能不是图形元素，而是容器，例如 <g>元素。在这种情况下，所有子元素都继承转换后的坐标系。

2. 该元素可能具有关联的绘画服务器(例如，图案或渐变)，或者具有自己的大小和定位机制的滤镜、 mask 或剪切路径。这些机制在变换后的坐标系中工作。

   这里举个例子来说明。第一个矩形具有线性梯度，其梯度向量在用户空间中定义。第二个矩形是相同的，但旋转并平移到一边。然后渐变与矩形一起移动。

<svg width="200" height="150">
  <defs>
    <linearGradient id="gradient" gradientUnits="userSpaceOnUse"
        x1="0" y1="50" x2="100" y1="50">
      <stop stop-color="red" offset="0"/>
      <stop stop-color="blue" offset="1"/>
    </linearGradient>
  </defs>
  <rect x="0" y="20" width="100" height="30" fill="url(#gradient)" />
  <rect x="0" y="20" width="100" height="30" fill="url(#gradient)" transform="translate(200, 20) rotate(90)" />
</svg>

1. 虽然 transform属性只采用用户空间坐标，i。 e.无单位数字、定位和大小属性(如 x、y、宽度和高度等)可能具有单位标识符，如百分比、em或其他 CSS 单元标识符。这使得进行更通用的定位成为可能。

   例如，下面的矩形将始终以相同的大小出现在 SVG 的中间，无论它的大小如何调整:

<svg width="100%" height="100%">
  <rect x="50%" y="50%" width="60" height="60" transform="translate(-30, -30)" />
</svg>