Control Default SVG fill colors

Hello,

I have done the same thing by googling and find the same thread.

I have checked and started to investigate about this 2 days ago.

It is very tricky!

Let's me explain the various solutions and results in Vuforia Studio.

1. Solution A: Use a CSS stylesheet.

It cannot work because in Preview or in Vuforia View, Image Widget is an img HTML tag.

svg is embedded inside it.

To have a CSS who can modify svg image, it should that this svg is present as a svg tag in HTML page.

I didn't find a find to insert a svg like that in Vuforia Studio.

Strange behavior when using a CSS like that to an Image Widget and enter svg-icon in Class field :

.svg-icon {
 filter: invert(1);
}

Colors of svg are inverted as expected.

2. Solution B:

    It is in working in progress in my side.

    When running app, changing img tag to svg.

    a) Load this javascript library in Vuforia Studio in Resources :

         It can do the conversion from img to svg tag

         https://github.com/iconfu/svg-inject

    b) In javascript code:

        - Load the javascript library

        - Add an event on load web page to apply that on right img id.

$scope.app.fn.loadResourceScript("Uploaded/svg-inject.min.js");


$scope.SVGInject = function(obj) {
SVGInject(obj);
}

$scope.imageOnLoad = function(obj) {
console.log('here'); 

if (window.event.path[0].tagName=='img')
{
console.log('image');

}
$scope.SVGInject(this)
}

     Saddly, this code doesn't report no error or warning.

     It seems like event is not fired.

     - After that, a CSS stylesheet will be enought to change the fill attribute of path tag in svg.

3. Use build-in angular solution about that:

    I have found this web page about that.

    https://blog.akquinet.de/2014/02/26/interactive-svg-with-angularjs-part-2/

    I didn't dig up more about this solution.

    It is the best if it is needed to update in many colors the svg with values from Widgets and values entered by end-usr. 

Best regards,

Samuel