Change style position setting

Questions
1

Am I learning how to use Three.js to manipulate svg in the Dom elements (but not using canvas). My JavaScript:-

    var shape= document.createElement('svg');
    var svgNode = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
    …. set some svg attributes.....
    shape.appendChild(svgNode);
    var object = new THREE.CSS3DObject(shape);
    scene.add(object);

In the Dom I can see the svg elements have been inserted:-

/svg/ class=“shapes” id=“SIP” style=“position: absolute; transform: translate(-50%, -50%) matrix3d(-0.850271, 0, 0.526346, 0, 0.478496, -0.416598, 0.772973, 0, -0.219274, -0.909091, -0.354221, 0, -175.42, -727.273, -283.377, 1);”><rect x=“50” y=“50” width=“150” height=“150” fill=“red” stroke-width=“10” stroke=“green”/ /rect/svg/ (n.b. had to replace some carets as the forum tool was not showing this svg element for some reason?)

however they do not appear visible until I edit the Dom and remove the “position: absolute;” setting.
I can do this same thing with non-svg elements like div, img and they are visible and I can manipulate them with Three without having to edit the “position” attribute manually.

With the svg version, how can I achieve this from my code without having to edit manually in the Dom. I am trying to achieve something like this (which is not valid syntax)

    svg.style.setAttribute('position', "");

Any comments much appreciated.

2

Can you please demonstrate with a live example what you are doing? I’ve tried to reproduce the issue with this fiddle but I can’t get it to work with a SVG node and your approach (I mean removing position: absolute;).

3

@Mugen87, thanks very much for your response on this issue.

My response may well show my ignorance with regards to how Three.js works and my noobee status.

Anyhoo….

I have edited and saved a version of your fiddle in which I have edited out anything related to ‘scene’ and ‘renderer’ thus leaving just ‘scene2’ and ‘renderer2’ and related svg stuff. This reflects almost exactly what I have in my code. When you run this you will see that ‘rect’ is not visible until you edit the ‘svg’ element (in the results panel) and take out the ‘position: absolute’ setting - then the ‘svg rect’ is visible.

So the question is how to enable this removal of the position setting (and only the position setting) from the ‘svg’ style from javascript?

4

I have discovered that removing the position setting is not the thing that makes the svg visible. The act of editing anything, in the svg element (using developer tools in Chrome or Firefox) makes the svg visible. I can change the position setting to relative, I can remove the position setting, I can change the id, the class and the svg becomes visible. Not sure exactly why, nor am I clear how to make the svg visible from the javascript automatically!

5

Um, I’ve tried this in Chrome and Firefox but it does not appear. What do you mean with “results” panel? Are you referring on a specific tab of the developer tools?

6

The original comment related to “results panel” was referring to the element within the ‘iframe’ within the fiddle page that contains the result of the fiddle Html, javascript and CSS and that can be edited by using the developer tools. I just found the element and removed the “position: absolute;” setting.

I have since discovered that I can edit anything in the element and the svg appears once I exit edit mode in the developer tools.

7

And, even more baffling is that, when I perform an edit and exit edit mode another svg element is appended beneath the original svg element - AND editing this new svg element results in the same behaviour - it becomes visible and creates an appended svg element - strange!!