Highlighted

HTML5 Canvas, Load SVG, Modify Stroke Not Working

Participant ,
May 06, 2020

Copy link to clipboard

Copied

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>

 

Views

256

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

HTML5 Canvas, Load SVG, Modify Stroke Not Working

Participant ,
May 06, 2020

Copy link to clipboard

Copied

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>

 

Views

257

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
May 06, 2020 0
Adobe Community Professional ,
May 06, 2020

Copy link to clipboard

Copied

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.

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...
May 06, 2020 0
Participant ,
May 06, 2020

Copy link to clipboard

Copied

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.

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...
May 06, 2020 0
Participant ,
May 08, 2020

Copy link to clipboard

Copied

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.border.jpg

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...
May 08, 2020 0
Participant ,
May 14, 2020

Copy link to clipboard

Copied

Hello, I'm still trying to figure this out.  If anyone has ideas or guidance, I'd really appreciate your help!  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...
May 14, 2020 0