how to get access of html element in javascript

[chetanmrane]

I have added dynamic svg element (below is the code) and now wanted to access circle element by id to update its css.

// Circle New
xmlsrc_in = '<circle id="bar" r="30" cx="100" cy="100" transition="stroke-dashoffset 1s linear" stroke="green" stroke-width="1em" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle>'

xmlsrc=xmlsrc+'<svg class="svg" xmlns="http://www.w3.org/2000/svg" height="200" width="200" viewPort="0 0 100 100" version="1.1">\n'

xmlsrc=xmlsrc+ xmlsrc_in

xmlsrc=xmlsrc+'</svg>'

Can someone tell me how could I access circle element by id/class etc (bar) in javascript function?

[ClayHelberg]

In the general case, you should be able to use document.querySelector() to grab an element in the document, and then you can access its .style property to modify style attributes, something like this:

document.querySelector("#bar").style.color = "#ff0000";

However, I don't know to what extent SVG content can be modified in this way. SVG rendering is usually its own thing separate from general HTML rendering. Instead of CSS properties, you may need to modify SVG markup attributes directly to get the desired effect. For example, if you want to make your generated "bar" element red instead of green, you might need to change the stroke attribute directly, like so:

document.querySelector("#bar").setAttribute("stroke","red");

[chetanmrane]

@ClayHelberg thanks for the reply.

I have tried both the methods but querySelector is returning a null object.

Unless and until I get an Html object, I can not apply any CSS or change the inline style.

Please see the attached screenshot of the console.

[ClayHelberg]

It looks like it's doing what I was afraid of, rendering the SVG separately and then just treating it as image data in the DOM. If you look at the document tree in the browser debugger, you'll see that there's no SVG markup there, it just gets rasterized and then thrown away apparently.

To do what you want, you might need to try a different approach, such as:

• If there are Unicode characters that are pretty close to the image you are using, you would have better CSS styling options, e.g. U+1F6AB = 🚫
• You could simply use multiple image files, one for each appearance needed, and update the "src" attribute to switch them out
• You could try loading the SVG markup into a TML widget, and then use Javascript to copy it into a container in the document to display it. Then you should be able to access the SVG markup with Javascript to modify attributes. A quick test confirms that this works for 2D widgets, but I couldn't get it to work for a 3D image widget.

[chetanmrane]

@ClayHelberg 

So I am trying to do circular progress bar like here

And taking the reference of this by replacing <rect> element by circles.

any suggestion/direction to achieve the same would be great help

[ClayHelberg]

Ah, I see. My guess is that when you set the src for a 3DImage widget, it rasterizes it and then throws away the markup.

You could possibly work around this by generating a new markup string whenever you need to change the graphic, instead of using CSS + Javascript. Write a function that regenerates the SVG markup with new parameters and replace the old with the new. Here's an example that lets you update the color by calling the function with a new color:

$scope.updateGraphic = function(color) {
  xmlsrc_in = '<circle id="bar" r="30" cx="100" cy="100" transition="stroke-dashoffset 1s linear" stroke="' + color + '" stroke-width="1em" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle>'


xmlsrc='<svg class="svg" xmlns="http://www.w3.org/2000/svg" height="200" width="200" viewPort="0 0 100 100" version="1.1">\n'

xmlsrc=xmlsrc+ xmlsrc_in

xmlsrc=xmlsrc+'</svg>'
  
  
  var data = "data&colon;image/svg+xml;charset=utf-8,"+encodeURIComponent(xmlsrc);
     var img = new Image();
     img.src=data;
     $scope.view.wdg["3DImage-1"].src=img.src

  $scope.$apply();
}

I haven't looked too closely at the animated example you are working from, so I'm not sure if the CSS animation part of it will work with a 3DImage widget. But I think if you parameterize it correctly you should be able to write a function that takes a percentage as input and updates the graphic to reflect that. 

[chetanmrane]

@ClayHelberg thanks for this solution

Change in color using the provided way is working fine.

But I wanted to replace the 3DImage/3DGuedge widget by the circular progressive bar with the percent text.

Tried couple of ways - creating a progressive circle using clipPath tag but it's not working as intended.

Another struggle is I am not getting the way to work with CSS+JS for animation as described here in vuforia studio, there is no documentation or help I found regarding this 😞