Question

我一直在尝试使用Embed元标记将一些svg文件嵌入到AS3项目中。例如：

[Embed(source = "assets/image.svg")]
private var Image : Class;

然而，当将这些文件显示为Sprites时，只有一些渐变在嵌入过程中存活。

从我发现的简单（2步）水平渐变似乎是最好的保存机会，但有时其他类型的渐变也是如此。在一种情况下，简单地将物体旋转90度会导致渐变在闪光灯中显示时消失。

有没有人知道在创建svg渐变填充时要使用的一组粗略规则，以便在flash中渲染时保留这些规则？

BTW：我使用Inkscape来创建有问题的图像。

更新：奇怪的解决方案似乎是设置svg文件中任何对象的不透明度，其渐变未正确显示为低于1的值。不要问我为什么这样可行，但确实如此。但是，它确实会使对象边缘的不良副作用无法平滑渲染。

Answer 1

只是一个嫌疑人，我之前从未听说过ActionScript中的SVG：

每次将一个元素分配给元素并进行修改时，Inkscape都不会创建新的渐变。相反，它创建一个空的渐变和对原始的引用。像这样：

<linearGradient id="linearGradient4168">
  <stop style="stop-color:#5f0000;stop-opacity:1;"
     offset="0" />
  <stop style="stop-color:#bc0000;stop-opacity:1;"
     offset="1" />
</linearGradient>

<linearGradient
   xlink:href="#linearGradient4168"
   id="linearGradient4174"
   x1="4.5130615"
   y1="6.9258556"
   x2="3.3891001"
   y2="1"
   gradientUnits="userSpaceOnUse"
   gradientTransform="matrix(1.0588235,0,0,1,-2.9411764e-2,12)" />

我敢打赌，你可以在AS中引用＃linearGradient4168，但不能引用#linearGradient4174。但是再一次，我对AS中的SVG没有任何线索。

干杯，

Answer 2

我相信用于将svg转换为精灵的代码是使用this code here Batik完成的。

FWIW，the svg embedding documentation说：

Flex支持SVG 1.1规范的子集，允许您导入静态的二维可缩放矢量图形。这包括对基本SVG文档结构，层叠样式表（CSS）样式，转换，路径，基本形状，颜色以及文本，绘画，渐变和字体的子集的支持。 Flex不支持SVG动画，脚本或与导入的SVG图像的交互。

...但这对细节没有帮助。根据Adobe捆绑的Batik版本，this list可能会有所帮助。

这看起来很有帮助 - information on which gradients from inkscape are not supported fully in batik。

Answer 3

最好的办法是在Illustrator中打开SVG文件并将其导出为FXG文件（尽管如此，您还需要最新版本的Flash Professional / Flash Builder来处理这些文件）。然后阅读this，了解如何将FXG文件成功导入Flash / Flex

Answer 4

我一直试图通过试验和错误来获得渐变，因为Flex SVG编译器无法正确解释Illustrator保存的SVG输出（只是添加了重叠元素的不透明度，这无法实现预期效果）。

Flex SVG实现渐变中似乎存在一个错误。为了正确解释垂直渐变向量，我必须将<g>的不透明度设置为正的小数值。价值本身似乎并不重要。另外，Flex正在我的渐变矩形周围绘制一种边框，这很烦人，我无法弄清楚如何删除。

这是我的SVG内容：

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="10cm" height="10cm" viewBox="0 0 1000 1000"
    xmlns="http://www.w3.org/2000/svg" version="1.1">

  <rect x="0" y="0" width="400" height="400" fill="#0000ff"  />

  <g opacity="0.1"><!-- here's the special value, for vertical gradients -->
    <defs>
      <linearGradient id="glow" x1="0%" x2="0%" y1="100%" y2="0%">
        <stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.4" />
        <stop offset="100%" stop-color="#FFFFFF" stop-opacity="0" />
      </linearGradient>
    </defs>

    <rect fill="url(#glow)" x="50" y="50" width="200" height="200"/>
  </g>

</svg>

在ActionScript3中使用Embed元标记时，支持哪些类型的SVG渐变填充

4 个答案: