5

我无法在 svg 文件中应用所有转换矩阵。如果文件仅包含路径且没有渐变 - 一切正常。但是在将 gradientTransform 添加并应用到 linearGradient 之后会导致渲染错误。

算法：

  1. 乘组和路径矩阵
  2. 与链接的线性梯度梯度变换相乘的路径变换
  3. 将变换应用于路径
  4. 将 gradientTransform 应用于 linearGradient

输入文件：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="linearGradient3755">
      <stop offset="0" />
      <stop offset="1" stop-opacity="0" />
    </linearGradient>
    <linearGradient id="linearGradient3761" xlink:href="#linearGradient3755" x1="16.162441" y1="66.128159" x2="117.17769" y2="66.128159" gradientUnits="userSpaceOnUse" />
  </defs>
  <g transform="translate(0,-924.36218)">
    <g transform="matrix(0.95516166,-0.46694301,0.71994792,0.61949768,-706.90347,408.6637)">
      <path d="M 2.1428571,3 L 126.07143,3 L 126.07143,123 L 2.1428571,123 z" transform="translate(0,924.36218)" style="fill:#ff0000;fill-opacity:1;stroke:none" />
      <path d="M 16.162441,21.428905 L 117.17769,21.428905 L 117.17769,110.8274 L 16.162441,110.8274 z" transform="matrix(0.96592583,-0.25881905,0.25881905,0.96592583,-17.36888,938.82017)" style="fill:url(#linearGradient3761);fill-opacity:1;stroke:none" />
    </g>
  </g>
</svg>

输出文件：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="linearGradient3755">
      <stop offset="0" />
      <stop offset="1" stop-opacity="0" />
    </linearGradient>
    <linearGradient id="linearGradient3761" xlink:href="#linearGradient3755" y1="95.70844949469" x1="26.6443734054997" y2="33.95075671356" x2="101.020294143975" gradientUnits="userSpaceOnUse" />
  </defs>
  <path fill="#f00" d="M -37.2023,57.8018 C -37.2023,57.8018 81.1699,-.0654 81.1699,-.0654 81.1699,-.0654 167.5631,74.2746 167.5631,74.2746 167.5631,74.2746 49.1909,132.1418 49.1909,132.1418 z" />
  <path fill="url(#linearGradient3761)" d="M -15.4903,74.3628 C -15.4903,74.3628 58.8856,12.6051 58.8856,12.6051 58.8856,12.6051 143.155,55.2964 143.155,55.2964 143.155,55.2964 68.7791,117.0541 68.7791,117.0541 z" />
</svg>

我的问题是，当向量相等时，为什么梯度不同？我该如何解决？

4

1 回答 1

2

只要您的变换矩阵不倾斜梯度，您的算法就是正确的。

在您的情况下，应用于渐变的最终转换是

translate(0,-924.36218) matrix(0.95516166,-0.46694301,0.71994792,0.61949768,-706.90347,408.6637) matrix(0.96592583,-0.25881905,0.25881905,0.96592583,-17.36888,938.82017)

这与

matrix(0.7363,-0.6113,0.9426,0.4775,-47.6376,74.0101)

这相当于

translate(-47.6376, 74.0101) rotate(-39.7) scale(0.957, 0.9695) skewX(23.4337)

如果最后一个skew(23.4337)不存在，那么一切都应该按您的意愿进行。

gradientTransform在不使用属性的情况下实现倾斜效果非常困难，或者更准确地说我应该说不可能。根据SVG 1.1 规范：

gradientTransform 包含从梯度坐标系到目标坐标系（即，userSpaceOnUse 或 objectBoundingBox）的可选附加变换的定义。这允许诸如倾斜渐变之类的事情。

它旨在实现倾斜效果。

如果你仍然好奇为什么这是不可能的，我做了一个简单的例子，如下图所示。

一个解释偏斜效应的例子

在左侧，我们将水平线性渐变应用于正方形。如果我们将 X 轴上的渐变倾斜 20 度，效果会呈现为两种形状的组合：

  • 左侧的三角形，其填充为纯色
  • 相同的正方形填充了相同的渐变，但正方形本身倾斜了 20 度，然后剪裁为其原始形状。

现在你不能简单地用一条线来描述渐变，这就是我们必须使用gradientTransform属性的原因。

于 2018-01-29T11:07:44.057 回答