@Devniz wrote:
Hi everyone,
I have a Ionic view with a simple SVG picture in the middle representing a microphone. I use SVG format because it looks really neat on my Android screen.
What I'm trying to achieve, it's when the user click on the microphone button it will record him but also I would like the button to change colour to green, just for the visual-effect that it is currently recording.
I had 2 options, the first one is to inject into the SVG file the new colour by using Library like SVGInjector but it was not successful.
The other option is to do a simple jQuery action to hide the front microphone and replace it by another one with a different colour. It is working fine but when the button is replaced, the second microphone (The green one) is completely distorted! It looks huge and awful, but the visual-effect is there.
Here is my HTML view witch contains the microphone button:
<div class="row center">
<img class="micro-red" on-hold="startToRecord()" width="150" ng-src="img/micro-red.svg">
<img class="micro-green" width="150" ng-src="img/micro-green.svg" style="display:none;width:150px;">
</div>And here is my jQuery to hide and show the button:
` $scope.holdMicro = function() {
$('.micro-red').css('display', 'none');
$('.micro-green').css('display', 'block');
}$scope.releaseMicro = function() {
$('.micro-green').css('display', 'none');
$('.micro-red').css('display', 'block');
}`As you can see, it looks pretty basic. Can someone please guide me to another solution to create this visual-effect of a pressed (and hold) button, to make my microphone looks the same even if there's a quick transition? Thanks for your help if you know something about that!
*Notes: I forgot to mention that this weird SVG image behaviour only occur on a Samsung S3 device, in the others Android devices, it looks neat.
Posts: 1
Participants: 1