gpt4 book ai didi

svg - 将gradientTransform应用于linearGradient

转载 作者:行者123 更新时间:2023-12-03 22:52:49 52 4
gpt4 key购买 nike

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

算法:

  • 将组矩阵和路径矩阵相乘
  • 与链接的 linearGradient gradientTransform 相乘路径变换
  • 对路径应用变换
  • 将梯度变换应用于线性梯度

  • 输入文件:

    <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>


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

    最佳答案

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

    在您的情况下,应用于渐变的最终转换是
    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 Specification :

    gradientTransform contains the definition of an optional additional transformation from the gradient coordinate system onto the target coordinate system (i.e., userSpaceOnUse or objectBoundingBox). This allows for things such as skewing the gradient.



    它旨在实现倾斜效果。

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

    an example explaining skew effect

    在左侧,我们将水平线性渐变应用于正方形。如果我们将 X 轴上的渐变倾斜 20 度,效果将呈现为 2 个形状的组合:
  • 左侧的三角形,其填充为纯色
  • 相同的正方形填充相同的渐变,但正方形本身倾斜 20 度,然后剪裁成其原始形式。

  • 现在你不能简单地用一条线来描述梯度,这就是为什么我们必须使用 gradientTransform属性。

    关于svg - 将gradientTransform应用于linearGradient,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17278158/

    52 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com