HTML5 Canvas, Load SVG, Modify Stroke Not Working
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>
