Flex 中的 Spark SVG 渲染选项？答案

【问题标题】：Spark SVG renderening options in Flex?Flex 中的 Spark SVG 渲染选项？
【发布时间】：2013-07-10 10:41:52
【问题描述】：

我对矢量有点陌生，所以请多多包涵。我想做的是用我在 Illustrator 中创建的一些矢量图形在 Flex 中制作一个工具栏。

问题是当我将矢量作为 SVG 导入 Flex 时，似乎会发生一些缩放（？），像素化我曾经清晰的矢量。

最初我认为问题是因为我的图形很小 (32 x 32)，所以我尝试将一个直接硬编码到我的 Flex mxml 文件中，它看起来很棒。这是comparison：

显然硬编码不是一个很好的解决方案，除此之外，我还打算在 Spark 图像中包含向量，因为我需要工具提示功能。

这是the SVG file我正在使用：

<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="32.469px" height="33.625px" viewBox="0 0 32.469 33.625" enable-background="new 0 0 32.469 33.625" xml:space="preserve">
<g id="New_Symbol_2">
    <g>

            <radialGradient id="SVGID_1_" cx="294.9609" cy="-374.6421" r="13.4597" gradientTransform="matrix(1 0 0 -1 -281.5 -360.8696)" gradientUnits="userSpaceOnUse">
            <stop  offset="0.8966" style="stop-color:#DDDDDD"/>
            <stop  offset="1" style="stop-color:#AAAAAA"/>
        </radialGradient>
        <path fill="url(#SVGID_1_)" stroke="#000000" stroke-width="0.25" stroke-miterlimit="10" d="M25.18,20.525
            c1.104-1.996,1.741-4.298,1.741-6.752C26.921,6.178,20.882,0,13.46,0C6.039,0,0,6.178,0,13.772c0,7.594,6.039,13.774,13.46,13.774
            c2.777,0,5.358-0.866,7.503-2.345l0.081,0.083l4.269-4.623L25.18,20.525z M13.46,23.309c-5.138,0-9.319-4.277-9.319-9.536
            c0-5.257,4.181-9.534,9.319-9.534c5.142,0,9.319,4.277,9.319,9.534C22.779,19.031,18.602,23.309,13.46,23.309z"/>

            <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="306.4043" y1="-399.7759" x2="310.9532" y2="-394.8978" gradientTransform="matrix(1 0 0 -1 -281.5 -370.375)">
            <stop  offset="0.1576" style="stop-color:#DDDDDD"/>
            <stop  offset="0.468" style="stop-color:#000000"/>
        </linearGradient>
        <path fill="url(#SVGID_2_)" stroke="#000000" stroke-width="0.25" stroke-miterlimit="10" d="M31.091,26.574l-5.778-5.913
            l-4.268,4.623l5.653,5.786C27.305,31.689,28.1,32,28.895,32s1.59-0.311,2.196-0.93C32.303,29.828,32.303,27.816,31.091,26.574z"/>

            <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="289.209" y1="-384.147" x2="301.6338" y2="-384.147" gradientTransform="matrix(1 0 0 -1 -281.5 -370.375)">
            <stop  offset="0.2808" style="stop-color:#0080FF"/>
            <stop  offset="1" style="stop-color:#0013FF"/>
        </linearGradient>

            <rect x="7.709" y="11.653" fill="url(#SVGID_3_)" stroke="#000000" stroke-width="0.25" stroke-miterlimit="10" width="12.425" height="4.238"/>

            <linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="285.6406" y1="-384.1484" x2="304.2793" y2="-384.1484" gradientTransform="matrix(1 0 0 -1 -281.5 -370.375)">
            <stop  offset="0" style="stop-color:#FFFFFF"/>
            <stop  offset="1" style="stop-color:#8FD9F9"/>
        </linearGradient>
        <path fill="url(#SVGID_4_)" stroke="#000000" stroke-width="0.25" stroke-miterlimit="10" d="M13.46,4.238
            c-5.138,0-9.319,4.277-9.319,9.534c0,5.257,4.181,9.537,9.319,9.537c5.142,0,9.319-4.279,9.319-9.537
            C22.779,8.515,18.602,4.238,13.46,4.238z M7.709,15.891v-4.238h12.425v4.238H7.709z"/>
    </g>
</g>
</svg>

这是 Flex 代码：

    <?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               minWidth="955" minHeight="600">

    <!--toolbar background-->
    <s:Rect id="background" width="45" height="400">
        <s:stroke>
            <s:SolidColorStroke color="0x000000" weight="1"/>
        </s:stroke>
        <s:fill>
            <s:LinearGradient>
                <s:entries>
                    <s:GradientEntry alpha="0.1" color="0x3366FF" ratio="0.33"/>
                    <s:GradientEntry alpha="0.1" color="0x0066ff" ratio="0.66"/>
                </s:entries>
            </s:LinearGradient>
        </s:fill>
    </s:Rect>

    <!--icons-->
    <s:HGroup width="100%" height="100%" gap="0">
        <s:VGroup height="100%" gap="10" paddingBottom="5" paddingLeft="5" paddingRight="5"
                  paddingTop="5">

            <!--imported svg-->
            <s:Image id="zoomoutButton" source="@Embed(source='../images/zoomout.svg')"
                     toolTip="Zoom out"/>

            <!--same image hardcoded-->
            <s:Group>
                <s:Path x="0.125" y="0.125"
                        data="M25.1797 20.5254C26.2842 18.5293 26.9209 16.2271 26.9209 13.7729 26.9209 6.17822 20.8818 0 13.46 0 6.03906 0 0 6.17822 0 13.772 0 21.3662 6.03906 27.5459 13.46 27.5459 16.2368 27.5459 18.8184 26.6797 20.9629 25.2012L21.0439 25.2842 25.3125 20.6611       25.1797 20.5254ZM13.46 23.3086C8.32178 23.3086 4.14111 19.0312 4.14111 13.7729 4.14111 8.51611 8.32178 4.23926 13.46 4.23926 18.6016 4.23926 22.7793 8.51611 22.7793 13.7729 22.7793 19.0312 18.6016 23.3086 13.46 23.3086Z"
                        winding="nonZero">
                    <s:fill>
                        <s:RadialGradient x="13.4609" y="13.7725" scaleX="26.9194" scaleY="-26.9194">
                            <s:GradientEntry color="#DDDDDD" ratio="0.8966"/>
                            <s:GradientEntry color="#AAAAAA" ratio="1"/>
                        </s:RadialGradient>
                    </s:fill>
                    <s:stroke>
                        <s:SolidColorStroke caps="none" joints="miter" miterLimit="10" weight="0.25"/>
                    </s:stroke>
                </s:Path>
                <s:Path x="21.1699" y="20.7861"
                        data="M10.0459 5.91309 4.26758 0 0 4.62305 5.65332 10.4092C6.25977 11.0283 7.05469 11.3389 7.84961 11.3389 8.64453 11.3389 9.43945 11.0283 10.0459 10.4092 11.2578 9.16699 11.2578 7.15527 10.0459 5.91309Z"
                        winding="nonZero">
                    <s:fill>
                        <s:LinearGradient x="3.85938" y="8.73975" rotation="312.999" scaleX="6.67011">
                            <s:GradientEntry color="#DDDDDD" ratio="0.1576"/>
                            <s:GradientEntry ratio="0.468"/>
                        </s:LinearGradient>
                    </s:fill>
                    <s:stroke>
                        <s:SolidColorStroke caps="none" joints="miter" miterLimit="10" weight="0.25"/>
                    </s:stroke>
                </s:Path>
                <s:Rect x="7.83398" y="11.7778" width="12.4248" height="4.23828">
                    <s:fill>
                        <s:LinearGradient x="0" y="2.11914" scaleX="12.4248">
                            <s:GradientEntry color="#0080FF" ratio="0.2808"/>
                            <s:GradientEntry color="#0013FF" ratio="1"/>
                        </s:LinearGradient>
                    </s:fill>
                    <s:stroke>
                        <s:SolidColorStroke caps="none" joints="miter" miterLimit="10" weight="0.25"/>
                    </s:stroke>
                </s:Rect>
                <s:Path x="4.26611" y="4.36279"
                        data="M9.31885 0C4.18066 0 0 4.27734 0 9.53418 0 14.7915 4.18066 19.0708 9.31885 19.0708 14.4604 19.0708 18.6382 14.7915 18.6382 9.53418 18.6382 4.27734 14.4604 0 9.31885 0ZM3.56787 11.6533 3.56787 7.41504 15.9927 7.41504 15.9927 11.6533 3.56787 11.6533Z"
                        winding="nonZero">
                    <s:fill>
                        <s:LinearGradient x="-0.000488281" y="9.53564" scaleX="18.6387">
                            <s:GradientEntry color="#FFFFFF" ratio="0"/>
                            <s:GradientEntry color="#8FD9F9" ratio="1"/>
                        </s:LinearGradient>
                    </s:fill>
                    <s:stroke>
                        <s:SolidColorStroke caps="none" joints="miter" miterLimit="10" weight="0.25"/>
                    </s:stroke>
                </s:Path>
            </s:Group>
        </s:VGroup>
    </s:HGroup>


</s:Application>

非常感谢有关如何使其正常工作的任何帮助/指示。

顺便说一下，使用 Flex 4.6.0。

谢谢！

弗兰基

【问题讨论】：

您使用 svg 而不是 fxg 格式的任何特殊原因？
一开始似乎更直接，我确实尝试将其作为 fxg 添加到按钮图标中，但我遇到了完全相同的问题...
您硬编码的 SVG 与您从 Illustrator 生成的 SVG 有什么区别？
我获得了硬编码版本的代码，方法是将我的图形保存在 Illustrator 中作为 fxg，然后从中复制代码并将命名空间添加到标签中。它们以不同的方式生成。
您说一个版本有效而另一个无效，那么两者之间有什么区别？找出最有可能包含解决问题的方法。

标签： flash apache-flex graphics svg

【解决方案1】：

我注意到您的 SVG 文件在 SVG 节点本身中指定了硬编码的高度和宽度：

... width="32.469px" height="33.625px" viewBox="0 0 32.469 33.625" ...

但在您的“硬编码”版本中，该节点显然不存在。这可能是区别吗？如果 Flex 将矢量图形光栅化为 33.625 像素高，然后 <s:Image/> 在显示列表中的大小略有不同，它可能会尝试将其缩放为位图，这有点违背矢量图形的全部目的。

如果去掉这些尺寸属性会更好吗？

【讨论】：

我不清楚您是如何确定“硬编码”版本中不存在宽度/高度属性的。尽我所能告诉这个问题只提供了一个文件。
如果我从 svg 节点中删除高度和宽度，然后运行图形更大但完美呈现。然后我尝试将 svg 的宽度和高度添加到 mxml 文件中的 s:Image 中，它的渲染效果要好得多。不完美但好多了。看起来我需要找到完美的宽度/高度组合才能使其正确显示，因为来自 svg 的仍然会导致缩放。感谢您的回答 - 我认为我们走在正确的轨道上 :)
是的，使用 s:Image 上的控件将其设置为您想要的高度和宽度，这样，它使用矢量而不是像素进行缩放。我还建议您四舍五入到整数像素。当您避免使用小数像素时，Flex 中的效果往往会更好。你说不完美？还模糊吗？
是的，可悲的是仍然模糊。只是一点点，但仍然......我现在已经将图形导出为 png，它显示得更加清晰。