小编Raz*_*con的帖子

将gradientTransform应用于linearGradient

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

算法:

  1. 将组矩阵和路径矩阵相乘
  2. 用链接的 linearGradient gradientTransform 乘以路径变换
  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>
Run Code Online (Sandbox Code Playgroud)

输出文件:

<svg xmlns="http://www.w3.org/2000/svg" …
Run Code Online (Sandbox Code Playgroud)

svg

5
推荐指数
1
解决办法
3218
查看次数

标签 统计

svg ×1