Flex 中的 Spark SVG 渲染选项? [英] Spark SVG renderening options in Flex?
本文介绍了Flex 中的 Spark SVG 渲染选项?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我对向量有点陌生，所以请耐心等待.我想要做的是根据我在 Illustrator 中创建的一些矢量图形在 Flex 中制作一个工具栏.
问题是当我将矢量作为 SVG 导入 Flex 时，似乎发生了一些缩放(?)，使我曾经清晰的矢量像素化.
最初我认为问题是因为我的图形很小 (32 x 32)，所以我尝试将一个直接硬编码到我的 Flex mxml 文件中，它看起来很棒.这是一个我正在使用:
<!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.525c1.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,13.74.74c0,6.178,20.882,0,13.46,0C6.039,0,13.772c0,13.74.749c2.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.53797c0-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,2"/gt9><linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="306.4043" y1="-399.7759" x2="310.9532" y2="-394.8978" gradientTransform="matrix(1 0 0 -1 -275.3)><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.913l-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,612.8,612.50,372.82.828,612.50<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="289.209" y1="-384.147" x2="301.6338" y2="-384.147" gradientTransform="matrix(1 0 0 -1 -280.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 -275.3)><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.238c-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.537C22.779,8.515,18.602,4.238,13.46,4.238z M7.709,15.891v-4.238h12.425v4.238H7.709z"/></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"><!--工具栏背景--><s:Rect id="background" width="45" height="400"><s:stroke><s:SolidColorStroke color="0x000000" weight="1"/></s:stroke><s:fill><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:矩形><!--图标--><s:HGroup width="100%" height="100%" gap="0"><s:VGroup height="100%" gap="10" paddingBottom="5" paddingLeft="5" paddingRight="5"paddingTop="5"><!--导入的 svg--><s:Image id="zoomoutButton" source="@Embed(source='../images/zoomout.svg')"toolTip="缩小"/><!--相同的图像硬编码--><s:Path x="0.125" y="0.125"数据=M25.1797 20.5254C26.2842 18.5293 26.9209 16.2271 26.9209 13.7729 26.9209 6.17822 20.8818 0 0 13.46 6.03906 0 0 6.17822 0 13.772 0 21.3662 6.03906 27.5459 27.5459 13.46 16.2368 27.5459 18.8184 26.6797 20.9629 25.2842 25.2012L21.0439 25.3125 20.6611 25.1797 20.5254ZM13.4623.3086C8.32178 23.3086 4.14111 19.0312 4.14111 13.7729 4.14111 8.51611 8.32178 4.23926 4.23926 13.46 18.6016 4.23926 22.7793 8.51611 22.7793 13.7729 22.7793 19.0312 18.6016 23.3086 13.46 23.3086Z"绕组=非零"><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:路径><s:Path x="21.1699" y="20.7861"数据= 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"绕组=非零"><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:路径><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:矩形><s:Path x="4.26611" y="4.36279"数据= 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"绕组=非零"><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:路径></s:组></s:VGroup></s:HGroup></s:应用程序> 非常感谢有关如何使其正常工作的任何帮助/指示.
顺便使用 Flex 4.6.0.
谢谢！
弗兰基
解决方案
我注意到您的 SVG 文件在 SVG 节点本身中指定了硬编码的高度和宽度:
... width="32.469px" height="33.625px" viewBox="0 0 32.469 33.625" ...但是在您的硬编码"版本中，该节点显然不存在.这可能是区别吗?如果 Flex 将矢量绘图光栅化为 33.625 像素高，然后
如果去掉这些尺寸属性会不会变得更好?
I am a bit new to vectors so bear with me. What I am trying to do is make a toolbar in Flex from some vector graphics I have created in Illustrator.
The problem is when I import the vectors into Flex as an SVG some scaling(?) seems to occur, pixelating my once crisp vector.
Initially I thought the problem was because my graphics were small (32 x 32) so I tried hard coding one directly into my Flex mxml file and it looks great. Here's a comparison :
Obviously hardcoding in not a great solution, besides which I had intended to have the vectors within Spark images because I need tooltip functionality.
This is the SVG file I am using :
<!-- 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>
Here's the Flex code :
<?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>
Would really appreciate any help / pointers as to how to get this working properly.
Using Flex 4.6.0 by the way.
Thanks!
Frankie
解决方案
I notice that your SVG file specifies hard-coded height and width in the SVG node itself:
... width="32.469px" height="33.625px" viewBox="0 0 32.469 33.625" ...
but in your "hard-coded" version, that node obviously isn't there. Could that be the difference? If Flex rasterizes the vector drawing to be exactly 33.625px high, and then the <s:Image/> is a slightly different size in the display list, it might try to scale it as a bitmap, which sort of defeats the whole purpose of vector graphics.
Does it get better if you just drop those size attributes?
这篇关于Flex 中的 Spark SVG 渲染选项?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
