[Dynamic SVG] Change Colour On Hover

<svgpreserveAspectRatio="none"version="1.1"viewBox="0 -960 960 960"xmlns="http://www.w3.org/2000/svg"

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/"

>

<title>home</title>

<hmi:selfdisplayName="home"name="extended.home"performanceClass="L"type="widget"version="1.0.0">

<hmi:paramDefdefault="false"name="Flip"type="boolean"/>

<hmi:paramDefdefault="0xFF000000"name="BasicColor"type="HmiColor"/>

<hmi:paramDefdefault="0xFF000000"name="AltBasicColor"type="HmiColor"/>

<hmi:paramDefdefault="0xFFFFFFFF"name="HoverColor"type="HmiColor"/>

<hmi:paramDefdefault="0xFF000000"name="StrokeColor"type="HmiColor"/>

<hmi:paramDefdefault="0xFFFFFFFF"name="StrokeHoverColor"type="HmiColor"/>

<hmi:paramDefdefault="100"name="Opacity"type="number"/>

<hmi:paramDefdefault="100"name="StrokeOpacity"type="number"/>

<hmi:paramDefdefault="1"name="StrokeWidth"type="number"/>

<hmi:paramDefdefault="true"name="ShowElement"type="boolean"/>

<hmi:paramDefdefault="0"name="RotateAngle"type="number"/>

<hmi:paramDefdefault="false"name="RotateAngleDirection"type="boolean"/>

<hmi:paramDefdefault="false"name="RotaryAnimation"type="boolean"/>

<hmi:paramDefdefault="false"name="RotaryAnimationDirection"type="boolean"/>

<hmi:paramDefdefault="25"name="RotaryAnimationSpeed"type="number"/>

</hmi:self>

<defs>

<hmi:localDefname="Pressed"type="number"value="0"/>

<hmi:localDefname="MouseHover"type="number"value="0"/>

<hmi:localDefname="ItemOperable"type="boolean"value="1"/>

<hmi:localDefname="BackColor"type="HmiColor"hmi-bind:value="{{ ( LocalProps.Pressed ? ParamProps.AltBasicColor :

(LocalProps.MouseHover ? ParamProps.HoverColor :

ParamProps.BasicColor )) }}"/>

<hmi:actionid="onMouseHover"hmi-bind:condition="{ LocalProps.ItemOperable }">

<hmi:setPropertyname="LocalProps.MouseHover"type="number"value="1"/>

</hmi:action>

<hmi:actionid="onMouseDown"hmi-bind:condition="{ LocalProps.ItemOperable }">

<hmi:setPropertyname="LocalProps.Pressed"type="number"value="1"/>

<hmi:setPropertyname="LocalProps.MouseHover"type="number"value="0"/>

</hmi:action>

<hmi:actionid="onMouseUp"hmi-bind:condition="{ LocalProps.ItemOperable }">

<hmi:setPropertyname="LocalProps.MouseHover"type="number"value="0"/>

<hmi:setPropertyname="LocalProps.Pressed"type="number"value="0"/>

</hmi:action>

<hmi:actionid="onMouseLeave"hmi-bind:condition="{ LocalProps.ItemOperable }">

<hmi:setPropertyname="LocalProps.Pressed"type="number"value="0"/>

<hmi:setPropertyname="LocalProps.MouseHover"type="number"value="0"/>

</hmi:action>

</defs>

<ghmi-bind:transform="translate({{ ParamProps.Flip? 960 : 0 }}, 0) scale({{ ParamProps.Flip? -1 : 1 }}, 1)"

hmi-event:mouseHover="url(#onMouseHover)"

hmi-event:down="url(#onMouseDown)"

hmi-event:up="url(#onMouseUp)"

hmi-event:mouseLeave="url(#onMouseLeave)">

<pathid="bgColor"

hmi-bind:fill="{{ Converter.RGBA(LocalProps.BackColor) }}"

d="M138-189v-377q0-22.25 8.875-41T174-639l251-190q22.68-17 54.84-17Q512-846 536-829l251 190q17.25 13.25 26.625 32T823-566v377q0 37.75-27.125 64.375T731-98H611q-20.75 0-33.375-13.125T565-144v-217q0-18.75-13.125-31.875T520-406h-79q-19.75 0-32.875 13.125T395-361v217q0 19.75-12.625 32.875T350-98H229q-37.75 0-64.375-26.625T138-189Z"/>

</g>

</svg>

This is based on the BasicButton example previously posted here:

https://support.industry.siemens.com/forum/au/en/posts/flat-style-buttons/273722

In the above post you'll also find a list of the svg events that you can bind to. For instance, by using the pan event you can actually dynamically drag an element of a svg around it's container or even the entire svg itself. This post contains an example svg and video:

https://support.industry.siemens.com/forum/au/en/posts/get-position-of-actual-screen-press/281660

There are other bits and pieces around the forum on what can be done with dynamics svgs, you might find something else useful with a few searches.