Dynamically load svg and access content to change fillColor

Asked Nov 03 '22 at 15:20

Active Nov 03 '22 at 15:29

Viewed 99 times

        var img = document.createElement('object');
        img.data = 'texture.svg';
        img.type = 'image/svg+xml';
        img.onload = function () {
            console.log('cont: '+this.contentDocument.getElementById('K3').id);
            this.contentDocument.getElementById('K3').style.fillColor = 'yellow';
        };

I would like to load svg file which is texture for Three.js mesh. Then I want to access element inside SCG with id K3 and change its fillColor to another. I tried with img but here someone advice to use <object> In my example onload method is not executed.

edited Nov 03 '22 at 15:29

ccprog

20,308
4
27
44

asked Nov 03 '22 at 15:20

arrowman

take inspiration from: https://dev.to/dannyengelman/load-file-web-component-add-external-content-to-the-dom-1nd – Danny '365CSI' Engelman Nov 03 '22 at 19:27
@Danny'365CSI'Engelman Thank you, it is an impressive method to manipulate svg. Unfortunately, it is not possible to use it for changing svg in texture container within Three.js **BTW. I have another idea to load SVG into canvas and use CanvasTexture in Three.js. If it succeeds I will write a solution here.** – arrowman Nov 04 '22 at 12:49
yes, like many older libraries that can't deal with modern shadowDOM, that is a Three.js limitation, not a Web Components limitation – Danny '365CSI' Engelman Nov 05 '22 at 10:12
@Danny'365CSI'Engelman Are you able to recommend not old alternative for Three.js? – arrowman Dec 07 '22 at 09:47
No, alas I am not – Danny '365CSI' Engelman Dec 07 '22 at 09:57

Dynamically load svg and access content to change fillColor

0 Answers0