代码之家  ›  专栏  ›  技术社区  ›  jsight TaherT

SVG线性梯度尺度及平移问题

  •  2
  • jsight TaherT  · 技术社区  · 17 年前

    我有以下径向梯度:

    <radialGradient
       inkscape:collect="always"
       xlink:href="#linearGradient2454"
       id="radialGradient2460"
       cx="4022.8572"
       cy="5451.2656"
       fx="4022.8572"
       fy="5451.2656"
       r="3559.865"
       gradientTransform="matrix(-0.1071067,-0.1166362,0.1377765,-7.0459663e-2,276.61943,1452.439)"
       gradientUnits="userSpaceOnUse" />
    

    我想把这个梯度的大小减少90%,并根据这个新的比例适当地转换它(X位置变为402.2,Y位置变为545.1,等等)。

    很明显,用cx、cy、fx、fy和r乘以.1,我就能得到一部分。但是,我如何通过编程修改渐变转换来获得其余的方法呢?

    1 回复  |  直到 17 年前
        1
  •  2
  •   räph    17 年前

    我会保持参数(cx、fx、r等)不变。只需将现有的变换矩阵与新的矩阵相乘即可进行缩放。得到的矩阵是新的梯度变换矩阵。

    如果要围绕中心缩放,则还需要在缩放矩阵中添加平移。

    因此,对于比例因子s=0.1:

    newGradientTansform = 
    oldGradienTransform * matrix(s, 0, 0, s, -cx*(s-1), -cy*(s-1))