SVG-如何将渐变变换矩阵应用于线性渐变笔刷? [英] SVG - How to apply a gradient transform matrix to a linear gradient brush?

问题描述

我正在用c ++语言编写SVG查看器应用程序.我实际上在几个我无法弄清楚的SVG文件中遇到了转换问题.

I'm writing a SVG viewer application in c++ language. I actually face a transform issue in several SVG files that I cannot figure out.

考虑以下SVG文件:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg id="svg9686" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="90mm" width="145mm" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 145 90" xmlns:dc="http://purl.org/dc/elements/1.1/">
 <defs id="defs9680">
  <linearGradient id="linearGradient6593-0" gradientUnits="userSpaceOnUse" x1="74.658" y1="-398.92" x2="75.519" y2="-485.7" gradientTransform="matrix(1.0069 0 0 1.19 1.4571 709.77)">
   <stop id="stop6595" stop-color="#be245a" offset="0"/>
   <stop id="stop6600" stop-color="#e46e6f" offset=".48408"/>
   <stop id="stop6597" stop-color="#f1a769" offset="1"/>
  </linearGradient>
 </defs>
 <g id="layer1" transform="translate(-7.631 -139.36)">
  <rect id="rect3690-4-2-09-4-2-8-0" height="90" width="145" y="139.36" x="7.631" fill="url(#linearGradient6593-0)"/>
 </g>
</svg>

这基本上是一个用渐变笔刷填充的矩形，从橙色到洋红色.应用所有转换后，矩形大小为90x145，位于坐标[0，0].

This is basically a rectangle filled with a gradient brush, from orange to magenta. The rectangle size is 90x145, located at coordinates [0, 0] after all the transformations are applied.

如果我很了解理论，正确绘制矩形，我应该执行以下步骤:

If I well understood the theory, to draw the rectangle correctly, I should process the following steps:

1. 在本地文档坐标系中，计算由x1，y1，x2和y2值给出的渐变笔刷边界框.应该通过将给定的梯度变换矩阵应用于从x1，y1，x2和y2计算出的点来完成
2. 由于渐变单元被声明为正在使用的用户空间"，因此请根据线性渐变标签值和变换后的边界框来计算画笔
3. 变换矩形坐标以填充，也将其放置在文档坐标系中
4. 使用先前创建的笔刷，在其变换后的坐标处绘制矩形

应用上述过程，我希望达到以下结果:

Applying the above described process, I expected to reach the following result:

但是我得到了这个结果:

But I get this result:

如果我手动更改上述源文件中的所有值，以删除所有转换并在文档坐标中应用所有值，则线性渐变会正确填充到我的矩形中.因此，如果有人可以向我解释，我将非常感激

If I manually change all the values in the above source file, to remove all transformations and apply all the values in the document coordinates, the linear gradient is filled correctly in my rectangle. For that reason, I would be really thankful if somebody could explain to me

1. 我在处理过程中做错了什么?
2. 我应该如何计算线性梯度值?
3. 如何将梯度矩阵应用于给定值?(即，我希望将矩阵应用于值将在文档系统坐标中对它们进行转换，因此转换后的值应大致给出x1 = 0，y1 = 0，x2 = 90和y2 = 145，但事实并非如此)

注意，欢迎以数学形式进行演示

NOTE a demonstration in mathematical form would be welcome

推荐答案

首先，我将术语边界框"用于渐变，我认为这没有帮助.四个值x1，x2，y1，y2描述了一个向量，梯度停止与该向量匹配，并且梯度法线垂直于该向量(在应用任何变换之前).盒子"与渐变属性没有任何有意义的关系.

First, using the term "bounding box" for the gradient I think is not helpfull. The four values x1, x2, y1, y2 describe a vector onto which the gradient stops are matched, and to which the gradient normal is perpendicular (before applying any transform). A "box" has no meaningfull relation to the gradient properties.

可以将梯度矢量可视化为线元素

The gradient vector could be visualized as a line element

<line x1="74.658" y1="-398.92" x2="75.519" y2="-485.7" />

第一步是应用 gradientTransform ="matrix(1.0069 0 0 1.19 1.4571 709.77)" .结果线将绘制为

The first step is to apply gradientTransform="matrix(1.0069 0 0 1.19 1.4571 709.77)". The resulting line would be drawn as

<line x1="76.6302" y1="235.055" x2="77.4972" y2="131.787" />

(由于变换没有偏斜，所以渐变法线仍然垂直于该直线.)

(Since the transformation introduces no skew, the gradient normal is still perpendicular to that line.)

这时，将渐变应用于矩形的局部坐标系

At this point, the gradient is applied to the rectangle in its local coordinate system

<rect width="145" height="90" x="7.631" y="139.36"/>
<line x1="76.6302" y1="235.055" x2="77.4972" y2="131.787" />

仅此之后，最后的 transform ="translate(-7.631 -139.36)" 应用于矩形和向量:

Only after that, the final transform="translate(-7.631 -139.36)" is applied to both the rectangle and the vector:

<rect width="145" height="90" x="7.631" y="139.36"/>
<line x1="70" y1="95.7" x2="69.87" y2="-7.57" />

请注意，如果将变换直接应用到rect而不是直接应用到封闭组，则甚至会如此.将变换应用于元素始终是最后要执行的操作.

Note that this would even be true if the transform had been applied to the rect directly, instead of an enclosing group. Applying the transform to an element is always the last operation to perform.

我认为您在哪里出错，是在将变换应用于矩形之后将 userSpaceOnUse 解释为 final 坐标系.但是它是坐标系

Where you went wrong, I think, is interpreting userSpaceOnUse as the final coordinate system after applying transforms to the rectangle. But what it is, is the coordinate system

引用渐变元素时的位置

in place at the time when the gradient element is referenced,

因此之前进行转换.

这篇关于SVG-如何将渐变变换矩阵应用于线性渐变笔刷?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！