0

Is this even possible? I need a cross-browser solution also working in IE, so getBBox() is not an option. And yeah I need this solution to mainly be able to calculate svg rotation origins and values needed for other svg transforms; would drastically facilitate what I want to do.

Illustration of what I want to do:

<svg viewBox="0 0 200 200">
<rect x="20" y="30" width="50" height="70" fill="white" stroke="black"/>
<circle cx="20" cy="30" r="2" fill="red"/>
<circle cx="70" cy="30" r="2" fill="red"/>
<circle cx="70" cy="100" r="2" fill="red"/>
<circle cx="20" cy="100" r="2" fill="red"/>
</svg>

What I would like to do is get the coordinates of the four red points, for any svg element in an svg. Of course, for <rect> that's easy (see my drawing), but I'd need to be able to calculate it for <text> elements in an svg, which may be of a variable / unpredictable width and height. I've really no idea how I could do that except by applying the getBBox() method onto the designated <text> element, but that's not supported in IE. I'd need that to rotate the according <text> elements as I want, with specific rotation origins which I could calculate knowing the coordinates of these four points. Manipulating the text-anchor is not an option for my case, as I already used that for layout purposes of the according <text> elements.

EDIT

getBBox() actually IS supported in IE, canIUse is wrong here. But as usual, when you think, a problem's resolved, the next one comes. When I have the following in my svg:

<text id="my-text">
<tspan>line1</tspan>
<tspan>line2 which may be longer</tspan>
</text>

And I want to access the tspans, I can do that for example in FF via:

document.getElementById( "my-text" ).children;

In IE (IE11), document.getElementById( "my-text" ) is found, while document.getElementById( "my-text" ).children returns undefined?! Is this normal? I mean I can just add a class to all of them, but it's still weird that the tspans are not recognized by IE as children. The markup present on the page is exactly the same; I checked on the inspector.. Has this sth to do with SVG being parsed as XML, if I'm not wrong?

Looks like this is actually normal, IE cannot access DOM children of SVG elements via children: See this

DevelJoe
  • 856
  • 1
  • 10
  • 24
  • please edit your question and add an example so that people can help you – enxaneta Mar 30 '21 at 07:25
  • Hope the illustration's enough. All SVG elements are basically rectangular elements, so there must be a way. – DevelJoe Mar 30 '21 at 07:38
  • We want actual markup that shows the problem and your attempt to solve it. Something that illustrates: What's the problem with getBBox and IE that you're facing? Since IE doesn't support CSS transforms on SVG content what issue are you having with rotation origins. – Robert Longson Mar 30 '21 at 07:44
  • The Problem with getBBox and IE is that it's apparently not supported: https://caniuse.com/?search=getBBox Also I don't mention CSS transforms, I use inline transforms, they work, and I must be able to calculate specific points in any svg element, and knowing the border coordinates would help me to do so. – DevelJoe Mar 30 '21 at 07:47
  • 1
    Did you actually try getBBox with IE? How do you know that's not a bug in canIUse? – Robert Longson Mar 30 '21 at 08:02
  • 1
    You're kidding, it's actually supported?! No I didn't try, will do then... – DevelJoe Mar 30 '21 at 08:08
  • Crazy, getBBox is indeed available. But a follow-up question popped up; added in the edits above.. – DevelJoe Mar 30 '21 at 14:19
  • childNodes will get you the tspan elements I think. – Robert Longson Mar 30 '21 at 15:08
  • totally, and actually works in every browser without counting any additional elements, thanks mate! – DevelJoe Mar 30 '21 at 20:39

0 Answers0