0

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

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

我认为在画布和 CSS 中，它的行为相同，因此也标记了 javascript 和 CSS。

4

1 回答 1

0

我不确定我是否理解你的问题，但让我试试：

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

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

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

<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属性仅采用用户空间坐标，即无单位数字，但定位和尺寸属性（如 x、y、宽度和高度等）可能具有单位标识符（如百分比）em或其他 CSS 单位标识符。这使得进行更通用的定位成为可能。

    例如，以下矩形将始终以相同大小出现在 SVG 中间，无论它是否被调整大小：

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

于 2018-10-06T14:48:39.940 回答