0

I'm back to square one a bit because some new code I had was giving me issues. I've got this currently:

<svg version="1.2" viewBox="0 0 600 400" width="600" height="400" xmlns="http://www.w3.org/2000/svg" >
 <text id="t1"  x="50%" y="50%" text-anchor="middle" style="fill: white;">TESTING MY UGLY TEXT</text>
 <script type="application/ecmascript"> 
    var width=350, height=80;
    var textNode = document.getElementById("t1");
    var bb = textNode.getBBox();
    var widthTransform = width / bb.width;
    var heightTransform = height / bb.height;
    var value = widthTransform < heightTransform ? widthTransform : heightTransform;
    textNode.setAttribute("transform", "matrix("+value+", 0, 0, "+value+", 0,0)");
 </script>
</svg>

It came from here: https://stackoverflow.com/a/22580176/1738522

I'm having a hard time putting it in the centre of my SVG since this didn't seem to do the trick: x="50%" y="50%" text-anchor="middle"

Any anyone please tell me how I might be able to do this?

EDIT: After a bit of research it seems: the scale attribute also affects the coordinate system of the current item, so if you want the element to be in the same position, will need to divide both x and y positions by the scalar to get the same relative position - however I don't know how I should be attempting this.

Community
  • 1
  • 1
Jimmy
  • 12,087
  • 28
  • 102
  • 192
  • 1
    the other question is abut scaling the text to fit in the box. Is that what you want? – Robert Longson Mar 03 '17 at 14:12
  • @RobertLongson The problem seems to be that apparently ```the scale attribute also affects the coordinate system of the current item, so if you want the element to be in the same position, will need to divide both x and y positions by the scalar to get the same relative position``` - so my javascript scaling is making it become off centre and I don't know how to keep it on centre – Jimmy Mar 03 '17 at 14:17
  • That doesn't answer my question. – Robert Longson Mar 03 '17 at 14:18
  • @RobertLongson This question is about positioning it in the centre after it has been scaled. The code to scale the text is already in the question and working. – Jimmy Mar 03 '17 at 14:20
  • 1
    If you're scaling the text to fit in the rect then it will always occupy the full width of the rect and centring is an irrelevant concept. – Robert Longson Mar 03 '17 at 14:31
  • @RobertLongston It's a text tag within an svg tag, with the text tag being a different width and height to the svg tag, therefore I need to sit the text in the middle of the SVG – Jimmy Mar 03 '17 at 14:34
  • I've no idea what you want to achieve then. – Robert Longson Mar 03 '17 at 14:35
  • I also don't see at first glance why this is a different question to http://stackoverflow.com/questions/42564052/dynamically-place-svg-in-middle-of-viewport-with-js – Robert Longson Mar 03 '17 at 14:38
  • @RichardLongson After the JS has adjusted the scale it makes it off centre. I want it to be in the centre. That user did answer the question but he modified the core of how the JS functioned (not just the positioning) and made it incompatible with web fonts. – Jimmy Mar 03 '17 at 14:42
  • `matrix(value, 0, 0, value, x-value*x, y-value*y)`. But you need the absolute values of x and y. – a better oliver Mar 03 '17 at 18:57

0 Answers0