Flash Flex中的Spark SVG渲染选项？
我对向量有点陌生，所以请容忍我。 我想做的是用我在Illustrator中创建的一些矢量图形在Flex中制作一个工具栏 问题是，当我将向量作为SVG导入Flex时，似乎出现了一些缩放（？），将我曾经清晰的向量像素化 起初我认为问题是因为我的图形很小（32 x 32），所以我尝试将一个图形直接编码到我的Flex mxml文件中，它看起来很棒。这里有一个： 显然，硬编码不是一个很好的解决方案，除此之外，我还打算在Spark图像中包含向量，因为我需要工具提示功能 这是我正在使用的：Flash Flex中的Spark SVG渲染选项？,flash,apache-flex,graphics,svg,Flash,Apache Flex,Graphics,Svg,我对向量有点陌生，所以请容忍我。 我想做的是用我在Illustrator中创建的一些矢量图形在Flex中制作一个工具栏 问题是，当我将向量作为SVG导入Flex时，似乎出现了一些缩放（？），将我曾经清晰的向量像素化 起初我认为问题是因为我的图形很小（32 x 32），所以我尝试将一个图形直接编码到我的Flex mxml文件中，它看起来很棒。这里有一个： 显然，硬编码不是一个很好的解决方案，除此之外，我还打算在Spark图像中包含向量，因为我需要工具提示功能 这是我正在使用的： <!--
<!-- 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>
<?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>
Frankie我注意到SVG文件在SVG节点本身中指定了硬编码的高度和宽度：
... width="32.469px" height="33.625px" viewBox="0 0 32.469 33.625" ...
如果您删除这些大小属性，效果会更好吗？您使用svg而不是fxg格式有什么特别的原因吗？开始时似乎更直接一些，我确实尝试将其作为fxg添加到按钮图标中，但我遇到了完全相同的问题…您硬编码的SVG和您从Illustrator生成的SVG之间有什么区别？我通过将我的图形保存在Illustrator中作为fxg，然后从中复制代码并将名称空间添加到标记中，获得了硬编码版本的代码。它们是以不同的方式生成的。你说一个版本有效，另一个版本无效。那么两者之间的区别是什么？我不清楚你是如何确定“硬编码”版本中没有的宽度/高度属性的。尽我所能，这个问题只提供了一个文件。如果我从svg节点中删除高度和宽度，然后运行，图形会大得多，但渲染得非常完美。然后，我尝试将svg中的宽度和高度添加到mxml文件中的s:Image中，它的渲染效果要好得多。不完美，但更好。看起来我需要找到完美的宽度/高度组合，以便正确显示，因为svg中的组合仍然会导致缩放。谢谢你的回答-我认为我们的思路是正确的：）是的，使用s:图像上的控件使其达到你想要的高度和宽度，这样，它就可以用矢量而不是像素进行缩放。我还建议您四舍五入到整数像素。如果避免使用分数像素，Flex中的效果会更好。你说不完美？还是很模糊吗？是的，还是很模糊。只有一点点，但仍然。。。我现在已经将图形导出为PNG，它的显示更加清晰。