Question

我回到原点，因为我的一些新代码给了我一些问题。我目前得到了这个：

<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>

它来自这里：https://stackoverflow.com/a/22580176/1738522

我很难将其置于SVG的中心，因为这似乎没有做到这一点：x="50%" y="50%" text-anchor="middle"

任何人都可以告诉我如何才能做到这一点？

编辑：经过一番研究后似乎： 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 - 但我不知道自己该怎么做。

SVG JS ECMA脚本 - 位于中心位置

0 个答案: