使用Flash显示SVG渐变？

Question

我正在使用AS3（Flash）来读取SVG文件并显示它们。 问题是正确显示线性/径向渐变。

以下是SVG中从红色到蓝色的简单线性渐变的示例。

<linearGradient id="GRADIENT_1" gradientUnits="userSpaceOnUse"
x1="107.3938" y1="515.5684" x2="105.2488" y2="428.8614"
gradientTransform="matrix(0.9988 0.0485 0.0485 -0.9988 0.8489 711.6634)">

    <stop  offset="0" style="stop-color:red"/>
    <stop  offset="1" style="stop-color:blue"/>

</linearGradient>

我已经能够从渐变（停止的样式）读取颜色，并通过渐变（停止的偏移）读取间距。

好的，现在我有一个漂亮渐变，它们之间的正确的颜色和正确的空间，但是没有旋转或缩放，其关闭位置！。

答案是将a Matrix提供给Flash的渐变功能。

---

方法1：使用提供的矩阵

SVG的 Matrix supplied ，gradientTransform="matrix(a,b,c,d,e,f)"似乎无效，因为当您将矩阵提供给Flash的beginGradientFill() function时，它在形状上显示渐变拉伸，因此只有渐变的中心颜色可见，如实心填充。

---

方法2：使用2个渐变点

生成矩阵

• x1，y1 标记可能是屏幕上渐变开始的位置。
• x2，y2 标记可能是屏幕上渐变结束的点。

当我说“2个渐变点”时，我指的是x1，y1和x2，y2，它们主要是告诉你 渐变开始时的形状 端。

Matrix.createGradientBox() function创建了一个用于渐变的矩阵，但参数与SVG 给出的非常不同。 它想要：

1. 宽度 ---使用此处2个渐变点之间的相对距离（X轴）
2. 高度 ---使用此处2个渐变点之间的相对距离（Y轴），但得到的结果不正确 ---也尝试使用这里有2个渐变点之间的距离，但我不知道要填入Width的内容！
3. 旋转角度 - 使用2个渐变点的角度（以弧度为单位），结果不正确！
4. 翻译x - 尝试了第一个渐变点的X，也尝试了0，结果不正确！
5. 翻译y - 尝试了第一个渐变点的Y，也尝试了0，结果不正确！

---

我可以使用哪些SVG数据生成Flash的渐变矩阵？

（请查看上面的SVG代码段，这是我描述渐变的所有数据）

Answer 1

如何使用2个渐变点绘制线性渐变

1. x1，y1和x2，y2 是屏幕坐标空间上的2个点，即要从中绘制渐变。
2. 使用SVG提供的变换矩阵来偏移x1，y1和x2，y2点。 - gradientTransform =“matrix（a，b， C，d，E，F）
3. 绘制从x1，y1到x2，y2的渐变。

即

  

x1，y1，x2，y2代表的值   由此产生的坐标系   为元素提供当前用户坐标系   引用渐变（通过a   在'填充'或'中风'财产）   渐变元素的时间   引用，然后然后应用   由属性指定的转换   gradientTransform

通过W3C Docs。

Answer 2

SVG渲染引擎！

也许有一些答案here可以提供帮助。