Highlighted

Access SVG object with JavaScript

Community Beginner ,
Jan 13, 2020

Copy link to clipboard

Copied

I want to add custom behavior to SVG images in my Captivate project though JavaScript code. However, it seems like the SVG object is not loaded when the JavaScript code attempts to access it. The object is listed in the innerhtml parameter of the surrounding div (SVG_1c contains SVG_1c_object), but this element comes back empty or null no matter how I try to access it.

 

var mySVG = document.getElementById("SVG_1c");
console.log(mySVG.innerHTML);
^This returns an empty string.
 
var mySVG = document.getElementById("SVG_1c_object");
console.log(mySVG);
^This returns null (undefined).
 
Is there a way to access this object in HTML, perhaps by waiting for the image to be loaded before running the rest of the script?
Adobe Community Professional
Correct answer by TLCMediaDesign | Adobe Community Professional

Try wrapping your code in a setTimeout or setInterval to wait for the svg to be rendered. It should be there in 100ms or so.

TOPICS
Advanced

Views

164

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Access SVG object with JavaScript

Community Beginner ,
Jan 13, 2020

Copy link to clipboard

Copied

I want to add custom behavior to SVG images in my Captivate project though JavaScript code. However, it seems like the SVG object is not loaded when the JavaScript code attempts to access it. The object is listed in the innerhtml parameter of the surrounding div (SVG_1c contains SVG_1c_object), but this element comes back empty or null no matter how I try to access it.

 

var mySVG = document.getElementById("SVG_1c");
console.log(mySVG.innerHTML);
^This returns an empty string.
 
var mySVG = document.getElementById("SVG_1c_object");
console.log(mySVG);
^This returns null (undefined).
 
Is there a way to access this object in HTML, perhaps by waiting for the image to be loaded before running the rest of the script?
Adobe Community Professional
Correct answer by TLCMediaDesign | Adobe Community Professional

Try wrapping your code in a setTimeout or setInterval to wait for the svg to be rendered. It should be there in 100ms or so.

TOPICS
Advanced

Views

165

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jan 13, 2020 0
Advocate ,
Jan 13, 2020

Copy link to clipboard

Copied

What sort of custome behavior are we talking about?

I was successful with both of these options...

 

This one changed the state to be a different color.

cp.changeState("SVG_1","on");

 This one caused the SVG to fade out.

$("#SVG_1c").fadeOut(500);

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 13, 2020 0
Community Beginner ,
Jan 14, 2020

Copy link to clipboard

Copied

To answer your first question, I am attempting to get around a boundingbox issue. I have multiple irregularly shaped SVGs in the same area that I use as buttons. However, their bounding boxes regularly overlap. I intended to apply CSS code like this in order to ignore the bounding boxes of the SVGs: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

 

Though the answer by TLCMediaDesign below helped me access the SVG very directly, sadly I have still not found a workaround for this overlapping bounding box issue.

Your code also works to access aspects of the SVG object, and I think they should come in use too. Thank you!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 14, 2020 0
Adobe Community Professional ,
Jan 13, 2020

Copy link to clipboard

Copied

Try wrapping your code in a setTimeout or setInterval to wait for the svg to be rendered. It should be there in 100ms or so.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 13, 2020 1
Community Beginner ,
Jan 14, 2020

Copy link to clipboard

Copied

This worked perfectly! I currently have a piece of code like this and it functions exactly as I hoped:

setTimeout(function(){
   var mySVG = document.getElementById("SVG_1c_object").contentDocument.children[0].children[0]; //g
   //More code of course
}, 100);
 
 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 14, 2020 0