Hi, is it possible to use the SVGs animate element inside a GUI Button e.g. to animate it on mouse over? It works in the custom loading screen but the it seems to be ignored and the icon is displayed but not animated. Did not find anything on this and it would be a great time saver if this would work. Thanks, C.
Thanks @gbz, unfortunately I don´t get the styles working inside the BABYLON.GUI.Button.
I am trying to make a custom unlock audio button and added an let advancedTexture = new GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI") and a button let unMuteButton = GUI.Button.CreateImageOnlyButton("unmute", imagePath + "unMute.svg")
Which works fine, but it would be great to add some animation to the svg e.g. to make the user aware of the button or to show it on mouse over. I also want to re-use the button to toggle audio, so that the user can mute and unmute at any time.
How did you add yours to your scene? The static styles are applied but not the animation. I wanted to use the element like in this bouncing ball. The animation works fine as an image in html but stops working in the GUI.Button. But may be I am missing something.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; display: block; shape-rendering: auto;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"> <circle cx="50" cy="32.9905" r="13" fill="#e15b64"> <animate attributeName="cy" dur="1s" repeatCount="indefinite" calcMode="spline" keySplines="0.45 0 0.9 0.55;0 0.45 0.55 0.9" keyTimes="0;0.5;1" values="23;77;23"></animate> </circle> </svg>
@cheister, perhaps this should be a feature request? I’m not sure the Babylon GUI supports animated SVG’s? Hopefully, the Babylon developers can offer more insight on this.
It could also help if you replicated what you’re seeing in a Babylon playground so others could go into your playground and try to tweak some things.