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>
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.
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.
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.
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.
Copy link to clipboard
Copied
I'm still trying to draw an outline around my imported SVG graphics which are converted to Bitmap.
I found this JS solution:
Can anyone please help me adapt the top solution (the one with the superhero) to my loader code above? Thank you.