Масштабирование изображений SVG во Flex

Question

У меня возникла проблема, когда при масштабировании SVG во флексе он обрезает часть изображения, как показано ниже (нижний правый вырез обрезан, он должен быть закруглен, как верхний левый)

Вот мой код:

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" actionBarVisible="false"
        xmlns:s="library://ns.adobe.com/flex/spark" title="Table">
    <s:layout>
        <s:HorizontalLayout paddingTop="10"/>
    </s:layout>
    <fx:Script>
        <![CDATA[
            [Embed(source="/assets/table.svg")]
            [Bindable]
            public var table:Class;
        ]]>
    </fx:Script>
        <s:Image source="{table}" width="50%" height="50%" verticalCenter="0" horizontalCenter="0" scaleMode="stretch" smooth="true" smoothingQuality="high"/>
</s:View>

Могу подтвердить, SVG выглядит не так, я пробовал со многими SVG, и у всех одинаковыерезультат ...

Я хочу иметь масштабируемые изображения в своем мобильном приложении, на многих устройствах и dpis, это лучший способ получить масштабируемые изображения?

Cheers

РЕДАКТИРОВАТЬ: SVG-код (грязный как прямой экспорт из Illustrator)

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.1, 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" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1024px"
     height="600px" viewBox="0 0 1024 600" enable-background="new 0 0 1024 600" xml:space="preserve">
<g id="Layer_2">
    <path fill="#3C2415" stroke="#000000" stroke-miterlimit="10" d="M961,463.486c0,52.262-42.366,94.627-94.627,94.627H104.627
        C52.366,558.113,10,515.748,10,463.486V161.627C10,109.366,52.366,67,104.627,67h761.746C918.634,67,961,109.366,961,161.627
        V463.486z"/>
</g>
<g id="Layer_1">
    <path fill="#006838" stroke="#000000" stroke-miterlimit="10" d="M947.752,450.238c0,52.262-42.365,94.627-94.626,94.627H119.767
        c-52.261,0-94.626-42.365-94.626-94.627V175.821c0-52.261,42.366-94.627,94.626-94.627h733.359
        c52.261,0,94.626,42.366,94.626,94.627V450.238z"/>
    <path fill="#A97C50" stroke="#000000" stroke-miterlimit="10" d="M457,248.5c0,37.832-30.668,68.5-68.5,68.5h-115
        c-37.832,0-68.5-30.668-68.5-68.5l0,0c0-37.832,30.668-68.5,68.5-68.5h115C426.332,180,457,210.668,457,248.5L457,248.5z"/>
</g>
</svg>

Answer 1

Я думаю, что вы хотите:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
width="100%" height="100%" 
viewBox="0 0 1024 600" 
preserveAspectRatio="xMinYMin meet">

Answer 2

Вот то, на чем я наконец остановился - работает также с FXG, SVG и растровыми изображениями.Для записи я украл большую часть этого откуда-то и внес кучу правок, чтобы он работал правильно.Кроме того, убедитесь, что в Illustrator вы изменили размер монтажной области, чтобы она соответствовала выбранной обложке, затем в параметрах экспорта для SVG снимите флажки со всех BS и также отключите предварительный просмотр Adobe.

package Core.Controls
{
import flash.display.DisplayObject;
import flash.geom.Rectangle;

import mx.core.UIComponent;

import spark.primitives.Rect;

public class VectorImage extends UIComponent
{
    public function VectorImage(source:Class = null)
    {
        if(source){
            this.source = source;
        }
        super();
    }

    private var _source : Class;
    protected var sourceChanged :Boolean = true;


    public function get source():Class
    {
        return _source;
    }

    public function set source(value:Class):void
    {
        _source = value;
        sourceChanged = true;
        this.commitProperties();
    }

    protected var imageInstance : DisplayObject;


    override protected function createChildren():void{
        super.createChildren();

        // if the source has changed we want to create, or recreate, the image instance
        if(this.sourceChanged){
            // if the instance has a value, then delete it
            if(this.imageInstance){
                this.removeChild(this.imageInstance);
                this.imageInstance = null;
            }

            // if we have a source value; create the source
            if(this.source){
                this.imageInstance = new source();
                this.addChild(this.imageInstance);
            }
            this.sourceChanged = false;

        }
    }

    /**
     * @private
     */
    override protected function commitProperties():void{
        super.commitProperties();

        if(this.sourceChanged){
            // if the source changed re-created it; which is done in createChildren();
            this.createChildren();
        }
    }

    override protected function measure():void
    {
        if(imageInstance != null)
        {
            this.measuredWidth = imageInstance.width;
            this.measuredHeight = imageInstance.height;
            this.minWidth = 5;
            this.minHeight = 5;
        }
    }

    override public function setActualSize(width:Number, height:Number):void
    {
        this.width = width;
        this.height = height;
        ScaleImage(width, height);
    }

    /**
     * @private
     */
    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
        super.updateDisplayList(unscaledWidth, unscaledHeight);

        // size the element.
        // I don't remember why I Wrote the code to check for unscaledHeight and unscaledWidth being 0

        if(imageInstance != null)
        {

            //scale properly
            ScaleImage(unscaledWidth, unscaledHeight);
        }
    }

    protected function ScaleImage(width:Number, height:Number)
    {
        if(imageInstance != null)
        {
            var scale:Number = Math.min(width/imageInstance.width, height/imageInstance.height);

            var scaleWidth:Number = (int)(imageInstance.width * scale);
            var scaleHeight:Number = (int)(imageInstance.height * scale);

            imageInstance.width = scaleWidth;
            imageInstance.height = scaleHeight;

            imageInstance.x = (width - imageInstance.width) *.5;
            imageInstance.y = (height- imageInstance.height) *.5;
        }
    }
}
}

Answer 3

Проблема с этим

<s:Image source="{table}" width="50%" height="50%"

Вы измеряете изображение на 50% от контейнера, в котором оно находится.

Попробуйте что-нибудь подобное.

<s:Image source="{table}" width="{table.width}" height="{table.height}"

или просто уберите ширину и высоту.

В худшем случае вам придется изменить размер изображения при изменении масштаба.