cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Control Default SVG fill colors

SOLVED
Amethyst

Control Default SVG fill colors

Hi there,

 

I wonder is it possible to control Default SVG fill colors via CSS codes in STYLE\Application panel?

If I want to asign orange to resources/Default/vu_seq_play.svg <circle class="base">.

Is it possible?

 

Any reply would be appreciated.

 

ClarK

Tags (2)
1 ACCEPTED SOLUTION

Accepted Solutions

Re: 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

 

View solution in original post

3 REPLIES 3
Highlighted

Re: Control Default SVG fill colors

@dsgnrClarK  I believe we cannot can change the style of SVG from CSS codes in STYLE\Application panel.  However, will check internally and review if there is a way.

 

-Durgesh

Re: Control Default SVG fill colors

I was googleing this the other day and what i saw indicated that the only was to do this was to use JS to modify the svg data to change the color. Here is a thread discussing this; https://stackoverflow.com/questions/9872947/changing-svg-image-color-with-javascript

Re: 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

 

View solution in original post