Question

我在svg文件中应用所有转换矩阵时遇到问题。如果文件只包含路径，没有渐变 - 一切正常。但添加并将gradientTransform应用于linearGradient会导致渲染错误。

算法：

乘以组和路径矩阵
乘以路径变换连接线性梯度gradientTransform
将变换应用于路径
将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>

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

Answer 1

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

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

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属性的情况下实现偏斜效果非常困难，或者更准确地说我应该说是不可能的。根据{{3}}：

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

它旨在实现歪斜效果。

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

SVG 1.1 Specification

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

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

现在你不能简单地使用一行来描述渐变，这就是为什么我们必须使用gradientTransform属性。

将gradientTransform应用于linearGradient

1 个答案: