HTML5 Canvas, Load SVG, Modify Stroke Not Working

Report · May 06, 2020

Hello,

I'm loading images/global_6000.svg and trying to modify the stroke, which has an ID of border. I get an error, "bitmap.getElementById is not a function," of which I agree with; I know I'm doing something wrong, such as not targeting the id correctly or something to that effect. I don't understand how to properly target the attributes of the loaded .SVG. I've tried multiple things, including the use of contentDocument, only because I've seen it used in some forum examples. Can anyone indicate what I'm doing wrong? Thank you!

const loader = new createjs.LoadQueue(false, null, true);
loader.on("complete", e =>
{
    const bitmap = new createjs.Bitmap(e.currentTarget.getResult("test"));
    this.addChild(bitmap);
	
	// Modify border of SVG *** THIS DOESN'T WORK ***
	bitmap.getElementById("border").setAttribute("stroke-width", 0.5);
	
	// *** THIS DOESN'T WORK EITHER ***
	//document.getElementById("test").contentDocument.getElementById("border").setAttribute("stroke-width", 0.5);

	
});
loader.loadManifest([{id:"test", src:"images/global_6000.svg", type:"image"}]);

Here is the .SVG file, global_6000.svg (note the id="border"):

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Creator: CorelDRAW -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="3.75735in" height="3.70974in" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"
viewBox="0 0 1.67447 1.65325"
 xmlns:xlink="http://www.w3.org/1999/xlink">
 <g id="Layer_x0020_1">
  <metadata id="CorelCorpID_0Corel-Layer"/>
  <path fill="black" d="M0.837234 1.5646l-0.0110536 -0.0397946 -0.267509 0.126016c0,-0.0338994 1.57908e-005,-0.0788102 0.0265303,-0.101696l0.210027 -0.181287 -0.00221071 -0.0641125 -0.0596928 -0.0198982 -0.0486375 0c-0.0342748,-0.143338 -0.0446055,-0.253143 -0.0199262,-0.313935l0.0818297 0 0.00700761 0.0327887 0.0150995 -0.00404771 -0.0176857 -0.108328 -0.161389 0.00884285 -0.0132643 0.0420053 -0.0110553 -0.0375839 -0.13707 0.0375839 -0.0132643 0.044216 -0.0110553 -0.028741 -0.148123 0.0707463 -0.0110553 0.0464267 -0.00663214 -0.0375839 -0.201184 0.101698 -0.0353732 0.0530589 0 -0.0375839 0.0331625 -0.0950642 0.711881 -0.521742 0 -0.263094c0,-0.0955449 0.0515868,-0.267509 0.0906428,-0.27193 0.0390559,0.00442143 0.0906428,0.176385 0.0906428,0.27193l0 0.263094 0.711881 0.521742 0.0331625 0.0950642 0 0.0375839 -0.0353732 -0.0530589 -0.201184 -0.101698 -0.00663214 0.0375839 -0.0110553 -0.0464267 -0.148123 -0.0707463 -0.0110553 0.028741 -0.0132643 -0.044216 -0.13707 -0.0375839 -0.0110553 0.0375839 -0.0132643 -0.0420053 -0.161389 -0.00884285 -0.0176857 0.108328 0.0150995 0.00404771 0.00700761 -0.0327887 0.0818297 0c0.0246793,0.0607929 0.0143486,0.170597 -0.0199262,0.313935l-0.0486375 0 -0.0596928 0.0198982 -0.00221071 0.0641125 0.210027 0.181287c0.0265145,0.0228861 0.0265303,0.067797 0.0265303,0.101696l-0.267509 -0.126016 -0.0110536 0.0397946z"/>
 </g>
 <g id="border">
  <metadata id="CorelCorpID_1Corel-Layer"/>
  <path fill="none" stroke="aqua" stroke-width=".03" d="M0.837234 1.5646l-0.0110536 -0.0397946 -0.267509 0.126016c0,-0.0338994 1.57908e-005,-0.0788102 0.0265303,-0.101696l0.210027 -0.181287 -0.00221071 -0.0641125 -0.0596928 -0.0198982 -0.0486375 0c-0.0342748,-0.143338 -0.0446055,-0.253143 -0.0199262,-0.313935l0.0818297 0 0.00700761 0.0327887 0.0150995 -0.00404771 -0.0176857 -0.108328 -0.161389 0.00884285 -0.0132643 0.0420053 -0.0110553 -0.0375839 -0.13707 0.0375839 -0.0132643 0.044216 -0.0110553 -0.028741 -0.148123 0.0707463 -0.0110553 0.0464267 -0.00663214 -0.0375839 -0.201184 0.101698 -0.0353732 0.0530589 0 -0.0375839 0.0331625 -0.0950642 0.711881 -0.521742 0 -0.263094c0,-0.0955449 0.0515868,-0.267509 0.0906428,-0.27193 0.0390559,0.00442143 0.0906428,0.176385 0.0906428,0.27193l0 0.263094 0.711881 0.521742 0.0331625 0.0950642 0 0.0375839 -0.0353732 -0.0530589 -0.201184 -0.101698 -0.00663214 0.0375839 -0.0110553 -0.0464267 -0.148123 -0.0707463 -0.0110553 0.028741 -0.0132643 -0.044216 -0.13707 -0.0375839 -0.0110553 0.0375839 -0.0132643 -0.0420053 -0.161389 -0.00884285 -0.0176857 0.108328 0.0150995 0.00404771 0.00700761 -0.0327887 0.0818297 0c0.0246793,0.0607929 0.0143486,0.170597 -0.0199262,0.313935l-0.0486375 0 -0.0596928 0.0198982 -0.00221071 0.0641125 0.210027 0.181287c0.0265145,0.0228861 0.0265303,0.067797 0.0265303,0.101696l-0.267509 -0.126016 -0.0110536 0.0397946z"/>
 </g>
</svg>

Report · May 06, 2020

if bitmap exists, you can reference its style.border property:

bitmap.style.border

and assign it's width, style (solid, dashed etc) and color a few other properties.

Report · May 06, 2020

Thank you, Klad. I'm still doing something wrong... I tried the following, and neither works (I referenced the w3schools guidance here and here).

bitmap.style.borderWidth = "1px";
bitmap.style.border = 1;

I also looked here on createjs.com , and I couldn't find any examples of using bitmap.style. I've searched the web very thoroughly... I'm at a loss as to how to target the "border" id in the .SVG and set the "stroke-width" attribute. If you have further guidance, I'd greatly appreciate it! Thank you.

Report · May 08, 2020

Hello, just bumping this thread, in case there are any other ideas. I've still been searching and experimenting, and nothing I try has worked. Again, I'm trying to change the stroke-width attribute of the border id of the loaded SVG, images/global_6000.svg. Thank you for any help. I just wish I could do something like

bitmap.style.border = 1;

Again, I'm not trying to make a border around the rectangular bitmap shape... I'm trying to control the border element of the SVG. Please see attached image.

Report · May 14, 2020

Hello, I'm still trying to figure this out. If anyone has ideas or guidance, I'd really appreciate your help! Thank you.

Report · Sep 16, 2021

I'm still trying to draw an outline around my imported SVG graphics which are converted to Bitmap.

I found this JS solution:

https://stackoverflow.com/questions/28207232/draw-border-around-nontransparent-part-of-image-on-canv...

Can anyone please help me adapt the top solution (the one with the superhero) to my loader code above? Thank you.

Adobe Community

HTML5 Canvas, Load SVG, Modify Stroke Not Working