svg - 将 userSpaceOnUse 坐标转换为 objectBoundingBox 坐标的算法？

Question

这两个 SVG 具有线性渐变，它们在不同的坐标系中表示，但渲染相同的图像。我希望能够在这些坐标系之间进行转换。我知道如何从 objectBoundingBox 转换为 userSpaceOnUse，但不知道其他方向。

<svg xmlns="http://www.w3.org/2000/svg">
 <defs>
    <linearGradient id="myGradient" x1="80" y1="35" x2="120" y2="115" gradientUnits="userSpaceOnUse">
      <stop offset="40%" stop-color="yellow" />
      <stop offset="50%" stop-color="black" />
      <stop offset="60%" stop-color="red" />
    </linearGradient>
  </defs>

  W<rect x="50" y="50" width="100" height="50" fill="url('#myGradient')" />
</svg>

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="myGradient" x1="0%" y1="0%" x2="100%" y2="100%" gradientUnits="objectBoundingBox">
      <stop offset="40%" stop-color="yellow" />
      <stop offset="50%" stop-color="black" />
      <stop offset="60%" stop-color="red" />
    </linearGradient>
   </defs>

  <rect x="50" y="50" width="100" height="50" fill="url('#myGradient')" />
</svg>

在下面的示例中 toUserSpaceOnUse将 SVG 渐变的坐标从 objectBoundingBox 转换为 userSpaceOnUse。从 userSpaceOnUse 转换为 objectBoundingBox 坐标的函数看起来如何， toObjectBoundingBox ?

    draw()
    
    function draw() {
      const canvas = document.getElementById('canvas');
      const ctx = canvas.getContext('2d');
    
      function toUserSpaceOnUse(x0, y0, w, h){
        let x1 = x0 + w;
        let y1 = y0 + h;
        let gtransform = 2 / (w / h + h / w);
        let xc = (x1 + x0) / 2;
        let yc = (y1 + y0) / 2;
        let dx = gtransform * (x1 - x0) / 2;
        let dy = gtransform * (y1 - y0) / 2;
        let rx0 = xc - dy;
        let ry0 = yc - dx;
        let rx1 = xc + dy;
        let ry1 = yc + dx;
        let result = [rx0,ry0,rx1,ry1];
        return result;
      }
      
      function draw(x0, y0, w, h) {
        ctx.save();
        let c = toUserSpaceOnUse(x0, y0, w, h);
        const gradient = ctx.createLinearGradient(c[0], c[1], c[2],  c[3]);
        gradient.addColorStop(0.4, 'yellow');
        gradient.addColorStop(0.5, 'black');
        gradient.addColorStop(0.6, 'red');
        ctx.fillStyle = gradient;
        ctx.fillRect(x0, y0, w, h);  
        ctx.restore();
      }
    
      draw(50, 50, 100, 50);
    }

    <div>
      <p>
        With objectBoundingBox coordinates
      </p>
      <svg xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="myGradient" x1="0%" y1="0%" x2="100%" y2="100%" gradientUnits="objectBoundingBox">
          <stop offset="40%" stop-color="yellow" />
          <stop offset="50%" stop-color="black" />
          <stop offset="60%" stop-color="red" />
        </linearGradient>
      </defs>
    
      <rect x="50" y="50" width="100" height="50" fill="url('#myGradient')" />
    </svg>
    </div>
    
    <div>
      <p>
        With userSpaceOnUse coordinates
      </p>
      <canvas id="canvas" />
    </div>

Answer 1

我想我明白你现在想要做什么。您假设梯度坐标始终为 0% 0% 100% 100%，然后尝试计算模拟 objectBoundingBox 变换产生的“拉伸(stretch)”的绝对梯度坐标。
有一种更简单的方法可以做到这一点。不需要复杂的计算功能。见下文。

draw()
    
    function draw() {
      const canvas = document.getElementById('canvas');
      const ctx = canvas.getContext('2d');

      function draw(x0, y0, w, h) {
        ctx.save();
        const gradient = ctx.createLinearGradient(0, 0, 1, 1); // 0% 0% 100% 100%
        gradient.addColorStop(0.4, 'yellow');
        gradient.addColorStop(0.5, 'black');
        gradient.addColorStop(0.6, 'red');
        ctx.fillStyle = gradient;
        ctx.translate(x0, y0);  // )
        ctx.scale(w, h);        // ) simulates the objectBoundingBox->userSpaceOnUse transform
        ctx.fillRect(0, 0, 1, 1);
        ctx.restore();
      }
    
      draw(50, 50, 100, 50);
    }

<div>
      <p>
        With objectBoundingBox coordinates
      </p>
      <svg xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="myGradient" x1="0%" y1="0%" x2="100%" y2="100%" gradientUnits="objectBoundingBox">
          <stop offset="40%" stop-color="yellow" />
          <stop offset="50%" stop-color="black" />
          <stop offset="60%" stop-color="red" />
        </linearGradient>
      </defs>
    
      <rect x="50" y="50" width="100" height="50" fill="url('#myGradient')" />
    </svg>
    </div>
    
    <div>
      <p>
        With userSpaceOnUse coordinates
      </p>
      <canvas id="canvas" />
    </div>

这有帮助吗？
为什么需要另辟蹊径(从 userSpaceOnUse 到 objectBoundingBox)？您的最终目标是呈现为 HTML Canvas ， 或者是其他东西？如果我能理解你的追求，我就能更好地回答你的问题。
更新
这是您所追求的反向功能。
我首先修改您的原始函数以支持除 (0% 0% 100% 100%) 以外的 objectBoundingBox 坐标。
那么对于reverse函数，基本上就是把原函数的操作倒过来就可以了。

draw()

function draw() {
  const grad = document.getElementById('myGradient2');

  // Convert objectBoundingBox coords to their userspace equivalents, compensating for the obb transform
  // x0,y0,w,h are the element (rect) attributes
  // o_x0, o_y0, o_x1, o_y1 are the objectBoundingBox coords
  function toUserSpaceOnUse(x0, y0, w, h, o_x0, o_y0, o_x1, o_y1) {
    // Convert objectBoundingBox coords (o_*) to userspace coords (u_*)
    let u_x0 = x0 + o_x0 * w;  
    let u_y0 = y0 + o_y0 * h;
    let u_x1 = x0 + o_x1 * w;
    let u_y1 = y0 + o_y1 * h;
    // Now recalculate the coords to simulate the effect of the objectBoundingBox implicit transformation
    let gtransform = 2 / (w / h + h / w);
    let xc = (u_x1 + u_x0) / 2;
    let yc = (u_y1 + u_y0) / 2;
    let dx = gtransform * (u_x1 - u_x0) / 2;
    let dy = gtransform * (u_y1 - u_y0) / 2;
    let rx0 = xc - dy;
    let ry0 = yc - dx;
    let rx1 = xc + dy;
    let ry1 = yc + dx;
    return [rx0,ry0,rx1,ry1];
  }

  // Convert userspace coords to their objectBoundingBox equivalents, compensating for the obb transform
  // x0,y0,w,h are the element (rect) attributes
  // u_x0, u_y0, u_x1, u_y1 are the userspace coords
  function toObjectBoundingBox(x0, y0, w, h, u_x0, u_y0, u_x1, u_y1) {
    // Recalculate the coords to simulate the effect of the reverse objectBoundingBox implicit transformation
    let gtransform = 2 / (w / h + h / w);
    let xc = (u_x1 + u_x0) / 2;
    let yc = (u_y1 + u_y0) / 2;
    let dx = (xc - u_x0) / gtransform;
    let dy = (yc - u_y0) / gtransform;
    let _x0 = xc - dy;
    let _y0 = yc - dx;
    let _x1 = xc + dy;
    let _y1 = yc + dx;
    // Convert userspace coords (u_*) to objectBoundingBox coords (o_*)
    let o_x0 = (_x0 - x0) / w;
    let o_y0 = (_y0 - y0) / h;
    let o_x1 = (_x1 - x0) / w;
    let o_y1 = (_y1 - y0) / h;
    return [o_x0, o_y0, o_x1, o_y1];
  }

  function draw(x0, y0, w, h, u_x0, u_y0, u_x1, u_y1) {
    let d = toObjectBoundingBox(x0, y0, w, h, u_x0, u_y0, u_x1, u_y1)
    grad.setAttribute("x1", d[0]);
    grad.setAttribute("y1", d[1]);
    grad.setAttribute("x2", d[2]);
    grad.setAttribute("y2", d[3]);
  }

  draw(50, 50, 100, 50, 80, 35, 120, 115);

  /*
  let a = [0.1, 0.2, 0.7, 0.8];
  let b = toUserSpaceOnUse(50, 50, 100, 50, ...a);
  let c = toObjectBoundingBox(50, 50, 100, 50, ...b);
  console.log("These should match: ",a,c);
  */
}

<div>
  <p>
    With objectBoundingBox coordinates
  </p>
  <svg xmlns="http://www.w3.org/2000/svg">
    <defs>
      <linearGradient id="myGradient" x1="80" y1="35" x2="120" y2="115" gradientUnits="userSpaceOnUse">
        <stop offset="40%" stop-color="yellow" />
        <stop offset="50%" stop-color="black" />
        <stop offset="60%" stop-color="red" />
      </linearGradient>
    </defs>
    
    <rect x="50" y="50" width="100" height="50" fill="url('#myGradient')" />
  </svg>
</div>
    
<div>
  <p>
    With userSpaceOnUse coordinates
  </p>
  <svg xmlns="http://www.w3.org/2000/svg">
    <defs>
      <linearGradient id="myGradient2" x1="0%" y1="0%" x2="0%" y2="0%" gradientUnits="objectBoundingBox">
        <stop offset="40%" stop-color="yellow" />
        <stop offset="50%" stop-color="black" />
        <stop offset="60%" stop-color="red" />
      </linearGradient>
    </defs>
    
    <rect x="50" y="50" width="100" height="50" fill="url('#myGradient2')" />
  </svg>
</div>