我正在使用 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>
我已经能够从渐变（停止点的样式）读取颜色，并通过渐变（停止点的偏移量）读取它们的间距。
好的，现在我有了一个漂亮的渐变，其中有正确的颜色以及它们之间的适当的空间，但是没有旋转或缩放，及其关闭位置！。
答案是输入一个矩阵进入Flash的渐变功能。
方法 1：使用提供的矩阵
提供的矩阵< /strong> 通过 SVG，gradientTransform="matrix(a,b, c,d,e,f)" 似乎实际上毫无用处，因为当您将该矩阵输入 Flash 的 时。 com/flash/9.0/ActionScriptLangRefV3/flash/display/Graphics.html#beginGradientFill()" rel="nofollow noreferrer">beginGradientFill()函数，它显示渐变在形状上拉伸得太多，因此只有渐变的中心颜色可见，就像实心填充一样。
方法 2：使用 2 个渐变点生成矩阵
- x1, y1 标签可能是屏幕上渐变开始的点。
- x2, y2 strong> 标签，可能是屏幕上渐变结束的点。
当我说“2 个渐变点”时，我指的是 x1,y1 和 x2,y2，它们主要是在告诉您 < strong>渐变在形状的何处开始并开始渐变。
有 Matrix.createGradientBox() 函数，它创建一个用于渐变的矩阵，但参数与 SVG 给我的参数非常不同。
它想要：
- 宽度 --- 这里使用 2 个渐变点之间的相对距离（X 轴）
- 高度 --- 这里使用 2 个渐变点之间的相对距离（ Y 轴），但得到了错误的结果 --- 也尝试在这里使用2 个渐变点之间的距离，但我不知道要在 Width 中填充什么！
- 旋转角度 -- 使用 2 个渐变点的角度，以弧度为单位，结果不正确！
- 平移 x -- 尝试了第一个渐变点的 X ，也尝试了 0，结果不正确！
- 翻译 y -- 尝试了第一个梯度点的 Y，也尝试了 0，结果不正确！
什么 SVG我可以使用数据为 Flash 生成渐变矩阵吗？
（看上面的 SVG 片段，这是我描述渐变的所有数据）
I'm using AS3 (Flash) to read SVG files and display them.
The problem is correctly displaying a linear/radial gradient.
Following is an example of a simple linear gradient from Red to Blue, in 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>
I've been able to read the colors from the gradient (stop's styles), and their spacing through the gradient (stop's offsets).
Okay, so now I've got a nice gradient with the right colors and right amount of space between them, but with NO rotation or scale, and its off position!.
The answer is to feed a Matrix into Flash's gradient function.
Method 1: Use the supplied matrix
The Matrix supplied by SVG, gradientTransform="matrix(a,b,c,d,e,f)" appears to be effectively useless since when you feed that matrix into Flash's beginGradientFill() function, it displays the gradient stretched over the shape so much so only the center color of the gradient is visible, like a solid fill.
Method 2: Generate a Matrix using 2 gradient points
- The x1, y1 tags might be the point on screen where the gradient begins at.
- The x2, y2 tags, might be the point on screen where the gradient ends.
When I say "2 gradient points", I'm referring to x1,y1 and x2,y2, which are mostly telling you where on the shape does the gradient start & end.
There's the Matrix.createGradientBox() function which creates a matrix for use with gradients, but the parameters are very different than what SVG gives me.
It wants:
- Width --- used the relative distance between the 2 gradient points here (X axis)
- Height --- used the relative distance between the 2 gradient points here (Y axis), but got incorrect results --- also tried using the distance between the 2 gradient points here, but I didn't know what to fill into Width!
- Rotation angle -- used the angle of the 2 gradient points, in radians, with incorrect results!
- Translation x -- tried 1st gradient point's X, also tried 0, with incorrect results!
- Translation y -- tried 1st gradient point's Y, also tried 0, with incorrect results!
What SVG data can I use to generate a gradient Matrix for Flash?
(Look at the SVG snippet above, that's all the data I have describing the gradient)
发布评论
评论（2）
如何使用 2 个渐变点
ie
来自W3C 文档。
How to draw a linear gradient using the 2 gradient points
i.e.
via W3C Docs.
SVG渲染引擎！
也许这里有一些可以提供帮助的答案。
SVG rendering engine!
Maybe there are some answers here that can help.