Object Fill

HelpXplain is the exciting new animated infographics and screencast tool that integrates with Help+Manual.

Moderators: Alexander Halser, Tim Green

Post Reply
Terry McMorrow
Posts: 10
Joined: Tue Jul 23, 2019 2:22 am

Object Fill

Unread post by Terry McMorrow » Tue Jul 30, 2019 6:05 pm

I am trying to fill an object with color in CustomScripts but cannot figure out how.

I tried setting fill
xplain.animateTo('#shape10', 0, {fill: '#FFFF00'}, 0);

I tried setting Opacity to 0 and then do something like
xplain.animateTo('#shape10', 0, {fillOpacity 1}, 0); //Tried many iterations of FillOpacity

shape10.fill='blue';
shape10.fillColor='blue';
shape10.style.fill="blue";

Is it possible to set the fill color??
Thanks for your help

User avatar
Alexander Halser
EC-Software Support
Posts: 3959
Joined: Mon Jun 24, 2002 7:24 pm
Location: Salzburg, Austria
Contact:

Re: Object Fill

Unread post by Alexander Halser » Wed Jul 31, 2019 12:12 am

Addressing the shape itself won't work, because the shape is a compound object. #shape10 is the <div> tag, which contains an inline SVG, which further contains a <path> tag. You must address this <path> tag to change the fill. But you will need to write a JavaScript function to get to it. One thing you can rely on, is: there is exactly 1 <svg> in the <div> and the <svg> has exactly 1 <path>.
Alexander Halser
Senior Software Architect, EC Software GmbH

Terry McMorrow
Posts: 10
Joined: Tue Jul 23, 2019 2:22 am

Re: Object Fill

Unread post by Terry McMorrow » Wed Jul 31, 2019 6:36 am

Thanks Alexander - That led me down the right path

var x=shape10.getElementsByClassName("xplsvgpath");
x[0].style.fill='red';
x[0].style.fillOpacity=1;

Post Reply