HiI added an image [SVG image], but I need to change it's color using 'fill' attribute, so how can access to it using CSS style
Hello @Diaa ZyoutWe already have a thread where it is discusses, how we can do it,
Check here - https://www.outsystems.com/forums/discussion/74969/call-a-javascript-function-from-a-inline-svg/
https://www.outsystems.com/forums/discussion/50514/dynamically-image-change/
Also Check This -
Documentation on Inline SVGhttps://success.outsystems.com/Documentation/11/Developing_an_Application/Design_UI/Patterns/Using_Mobile_and_Reactive_Patterns/Utilities/Inline_SVG
Check This Sample Screen - https://personal-ejuytnht.outsystemscloud.com/SVGSample/Screen1?_ts=637924566325686632
Code Snipet -
var element =document.querySelector("svg circle");
element.style.fill=#000;
I hope this will help
Thanks
Thank you Tousif,I want to use the image widget rather than svg inline, it's easy to use, is there any solution?
Hi can you please elaborate it more, from where you are getting image, Is it a Url or you are getting binary data from Database or you are using OutSystems image widget in which you are using svg image
and If you could provide oml it would be great
Hi,yes, I have 2 optionsone I used an image widget using local svg imagesoon will have the second option, that user will upload an svg imageso. I need a class to change the colors of svg [overwrite the fill class, if you see the image above, just I need to access to 'fill' class svg > g > path to fill]
You have to use some sort of JavaScript/jQuery to achive this
Please check this for reference
https://stackoverflow.com/questions/39133210/how-to-change-svg-fill-color-loaded-by-jquery
https://codepen.io/LukyVj/pen/zYpmme
Also check with this JS code snipet-
document.getElementsByTagName("g")[0].style.fill = "blue";
Please check
Hi Diaa,
You can change the color of the SVG image.
1, first Drag & Drop the InlineSVG.
2, click on the SVG code and paste your SVG code with the double-quotes( " " ).
https://dmagre.outsystemscloud.com/SVGIcon/Home?_ts=637925544399544385
hope this helps you. also I have attached the OML with the solution.
Thanks,
Thank you Diksha,I want to use the image widget, it's easy to use, is there any solution?
As per my knowledge this is the easy way to change SVG image color, and with Image widget i really don't feel we can do this without customizations. But Yes i can help you with the clear solution with OML, do help me with your OML so that i can make changes there and help you with the solution.
Hi, I used an image widget using local svg image I need a class to change the colors of svg [overwrite the fill class, if you see the image above, just I need to access to 'fill' class svg > g > path to fill]
I have added a new class in SVG Widget and added style for SVG Image but for the image widget, I think it is not possible to change color with the help of CSS.
I have attached the OML with the solution. please let me know if it will helps you