svghmi: hmi-bind:transform and scale doesn't work

hmi-bind:transform="translate(-55 + {{ LocalProps.IconTranslation * 110 }},12) scale(0.29) rotate({{ -LocalProps.IconRotation }})">

<!DOCTYPE svg PUBLIC "-//SIEMENS//DTD SVG 1.0 TIA-HMI//EN" "http://tia.siemens.com/graphics/svg/1.4/dtd/svg14-hmi.dtd">

<!-- SIMATIC WINCC Copyright (C) Siemens AG 2017. All Rights Reserved. -->

<svg xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink"

xmlns:hmi-bind--xlink="http://svg.siemens.com/hmi/bind/xlink/"

xmlns:hmi="http://svg.siemens.com/hmi/"

xmlns:hmi-bind="http://svg.siemens.com/hmi/bind/"

xmlns:hmi-element="http://svg.siemens.com/hmi/element/"

xmlns:hmi-feature="http://svg.siemens.com/hmi/feature/"

xmlns:hmi-event="http://svg.siemens.com/hmi/event/"

viewBox="-68 -25 136 50"

preserveAspectRatio="xMinYMin meet">

<hmi:self type="widget" displayName="TestValve" name="extended.TestValve" version="1.0.1" performanceClass="L">

<!-- Static configuration -->

<hmi:paramDef name="ShowPins" type="boolean" default="false" />

<hmi:paramDef name="Rotate" type="number" default="0"/>

<!-- States, modes, ... -->

<hmi:paramDef name="ActiveAlarm" type="enum" default="4">

<hmi:enum-member name="None" value="0"/>

<hmi:enum-member name="Critical" value="1"/>

<hmi:enum-member name="High" value="2"/>

<hmi:enum-member name="Low" value="3"/>

<hmi:enum-member name="Diagnostic" value="4"/>

</hmi:paramDef>

</hmi:self>

<defs>

<hmi:localDef name="IconRotation" type="number" hmi-bind:value="{{ ParamProps.Rotate - (180 * floor((ParamProps.Rotate + 44) / 180)) }}"/>

<hmi:localDef name="IconTranslation" type="number" hmi-bind:value="{{gt(LocalProps.IconRotation, 45.0) ? 1 : 0}}"/>

</defs>

<g id="Valve"

stroke="#000000"

stroke-opacity="1"

stroke-width="2"

transform="rotate(0,0,0)">

<path id="Body"

d="M -40,-23 v 46 l 40,-23 40,23 v -46 l -40,23 z"

fill="0xFFFFFFFF"/>

<path id="Lines"

d="M -60,0 h 20 m 80,0 h 20"

hmi-bind:display="{{ParamProps.ShowPins ? 'inline':'none'}}"/>

</g>

<g id="Alarmsymbols"

hmi-bind:transform="translate(0,{{ LocalProps.IconTranslation * 24 }}) scale(0.5) rotate({{ -LocalProps.IconRotation }},-55,-12)">

<g id="Diagnostic"

hmi-bind:display="{{eq(ParamProps.ActiveAlarm, 4.0) ? 'inline' : 'none'}}">

<path id="path8"

fill="#ff4080"

fill-opacity="1"

stroke="#000000"

stroke-width="1"

stroke-opacity="1"

d="M -55,-19.5 -47.5,-12 -55,-4.5 -62.5,-12 Z"/>

<text x ="-55.6"

y="-8.1"

fill="#000000"

font-family="Verdana"

font-size="11px"

font-weight="bold"

text-anchor="middle">

4

</text>

</g>

<g id="Low"

hmi-bind:display="{{eq(ParamProps.ActiveAlarm, 3.0) ? 'inline' : 'none'}}">

<path id="path7"

fill="#ffb300"

fill-opacity="1"

stroke="#000000"

stroke-width="1"

stroke-opacity="1"

d="M -62.5,-19.5 h 15 l -7.5,15 Z"/>

<text x ="-54.7"

y="-11.4"

fill="#000000"

font-family="Verdana"

font-size="9px"

font-weight="Bold"

text-anchor="middle">

3

</text>

</g>

<g id="High"

hmi-bind:display="{{eq(ParamProps.ActiveAlarm, 2.0) ? 'inline' : 'none'}}">

<path id="path5"

fill="#ffff00"

fill-opacity="1"

stroke="#000000"

stroke-width="1"

stroke-opacity="1"

d="M -62.5,-4.5 h 15 l-7.5,-15 Z"/>

<text x ="-55"

y="-6.3"

fill="#000000"

font-family="Verdana"

font-size="9px"

font-weight="bold"

text-anchor="middle">

2

</text>

</g>

<g id="Critical"

hmi-bind:display="{{eq(ParamProps.ActiveAlarm, 1.0) ? 'inline' : 'none'}}">

<rect id="rect1"

fill="#ff0000"

fill-opacity="1"

stroke="#000000"

stroke-width="1"

width="15"

height="15"

x="-62.5"

y="-19.5"/>

<text x ="-55"

y="-7"

fill="#FFFFFF"

font-family="Verdana"

font-size="14px"

font-weight="Bold"

text-anchor="middle">

1

</text>

</g>

</g>

</svg>