使用 Flash 显示 SVG 渐变？答案

【问题标题】：Display SVG gradients using Flash?使用 Flash 显示 SVG 渐变？
【发布时间】：2010-09-25 08:02:44
【问题描述】：

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

以下是 SVG 中从 Red 到 Blue 的简单 线性渐变 示例。

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

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

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

答案是将a Matrix 输入到 Flash 的渐变函数中。

方法一：使用提供的矩阵

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 提供的参数非常不同。它想要：

宽度 --- 这里使用了2个渐变点之间的相对距离（X轴）
高度 --- 这里使用了 2 个梯度点之间的相对距离（Y 轴），但是得到了不正确的结果 --- 也尝试了使用 两个梯度点之间的距离2个渐变点在这里，但是我不知道要填什么到宽度！
旋转角度 -- 使用了 2 个渐变点的角度，以弧度为单位，结果不正确！
平移 x -- 尝试了第一个梯度点的 X，也尝试了 0，结果不正确！
翻译 y -- 尝试了第一个梯度点的 Y，也尝试了 0，结果不正确！

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

（看看上面的 SVG sn-p，这就是我描述渐变的所有数据）

【问题讨论】：

标签： flash svg linear-gradients gradient radial-gradients

【解决方案1】：

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

x1,y1 和 x2,y2 是 屏幕坐标空间 上的 2 个点，渐变将从该点绘制到。
使用 SVG 提供的变换矩阵来偏移 x1,y1 和 x2,y2 点。 -- gradientTransform="matrix(a,b, c,d,e,f)
绘制从 x1,y1 到 x2,y2 的渐变。

即

x1, y1, x2, y2 表示坐标系由 为元素设置当前用户坐标系引用渐变（通过 'fill' 或 'stroke' 属性）在梯度元素的时间引用，然后应用属性指定的变换渐变变换。

通过W3C Docs.

【讨论】：

【解决方案2】：

SVG 渲染引擎！

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

【讨论】：