2

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

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

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

根据我的发现，简单（2 步）水平渐变似乎最有可能被保留，但有时其他类型的渐变也是如此。在一种情况下，简单地将对象旋转 90 度会导致渐变在 Flash 中显示时消失。

有谁知道创建 svg 渐变填充时要使用的一组粗略规则，以便在 Flash 中渲染时保留它们？

顺便说一句：我使用 Inkscape 来创建有问题的图像。

更新：奇怪的是，解决这个问题的方法似乎是将 svg 文件中的任何对象的不透明度设置为不正确显示渐变的值低于 1。不要问我为什么这有效，但它确实有效。然而，它确实具有对象边缘不平滑渲染的不良副作用。

4

4 回答 4

0

只是一个嫌疑人，我以前从未听说过 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 一无所知。

干杯，

于 2009-07-14T12:09:30.103 回答
0

我相信用于将您的 svg 转换为 sprite 的代码是使用使用Batik的代码完成的。

FWIW，svg 嵌入文档说：

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

...但这并不能帮助您了解具体情况。根据捆绑的 Batik Adob​​e 版本，此列表可能会有所帮助。

这看起来很有帮助——有关 batik 中不完全支持来自 inkscape 的哪些渐变的信息。

于 2009-07-14T23:08:02.323 回答
0

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

于 2009-10-01T21:09:59.087 回答
0

我一直在尝试通过反复试验让渐变工作，因为 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>
于 2010-11-26T18:14:11.757 回答