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
