This is an archived snapshot of W3C's public bugzilla bug tracker, decommissioned in April 2019. Please see the home page for more details.
Hi Team, It seems that currently it isn't possible to access the offset values of inner elements in an SVG. Could you please look into this. It would greatly simplify drawing and creating visual connections with other elements if it's possible to access the offsets of inner elements in an SVG. Use case: an online electronic schematic application where part pins need to connected with other components. Thanks, Arun
Could you give an example of what you're trying to achieve please?
I'm trying to make an online electronic schematic application. The electronic parts are visualized using SVG rectangles, text, lines etc, (see this example part: (https://jsbin.com/tapedam/edit?html,output). The <line> elements represent the part pins. I want to connect the pins with other components and sustain the connections even if the components are moved anywhere in the browser window. However the lines do not expose their offsets to the DOM as they're inside the SVG. This makes it difficult to sustain the connections of the parts. If the offsets of inner elements are exposed it would make it easier to identify the position of specific element(line, text, rectangle).
Hi Team, Is there any update on this? Thanks, Arun
What's wrong with getBBox or getBoundingClientRect? Why don't either of these give you the offset you need?
It seems that getbbox works if the SVG graphic is defined line in the html. However for my application the SVG graphics are in .svg files. This makes it impossible to get the offsets of inner svg components of a .svg file.
get the embedded contentDocument, use that to get the element or elements you want from the svg and then call either getBBox or getBoundingClientRect on that.
The SVG objects placed on the HTML will be in the order of hundreds. If I use the contentDocument method I'll have to generate hundreds of IDs. Scalability seems to be a problem with this approach. For example, assume that there are 5 SVG objects with 8 inner components each then I'll have to create 40 IDs to uniquely access each inner component.
In reply to Arun from comment #7) > The SVG objects placed on the HTML will be in the order of hundreds. If I > use the contentDocument method I'll have to generate hundreds of IDs. > Scalability seems to be a problem with this approach. Maybe, or alternatively you could use CSS selectors to pick them out.( > > For example, assume that there are 5 SVG objects with 8 inner components > each then I'll have to create 40 IDs to uniquely access each inner > component. use classes and select by class. Or just select by tag name.
Created attachment 1658 [details] code snippet to modify the inner svg elements
It seems that you have not understood the concept well. Using css selectors it isn't possible to uniquely identify an element and if I use IDs I'll have to generate a large number of unique IDs The challenge here is to get the offsets of inner SVG elements in the HTML DOM. Even if the SVG element is moved anywhere in the DOM we should be able to access the offsets of the inner elements which can help us sustain the connections with other SVG elements. Anyways I tried the contentDocument that you have suggested but I'm unable to modify the inner SVG components (see attached screenshot). Here is the code snippet that I'm testing on google cloud (http://104.155.221.20/). Also Here is the link that I referred to access the inner svg components in an object tag (https://benfrain.com/selecting-svg-inside-tags-with-javascript/)
The fill CSS property does not apply to line elements, try modifying the stroke. And yes you can select individual elements with CSS selectors. I don't see any bug here. You'd probably be better off asking this kind of question on some other forum e.g. stackoverflow