我有一个绘制 Jersey 轮廓的 SVG 路径，我想将球员的姓氏放在 Jersey 的中央。此外，由于我会将不同长度的名字放入 Jersey 中，因此我想使文本的大小动态缩放以适合 Jersey 。
我能够通过涉及 getBoundingClientRect() 的一些数学方法使文本居中，但我在文本的动态大小调整方面遇到了困难。一开始看起来不错，但是当我调整屏幕大小时，文本大小与 Jersey 的大小不成比例。
我在下面包含了一个代码片段来进行演示。请帮助我理解为什么会出现这个大小问题，以及我可以做些什么来实现正确的文本大小调整。
编辑:我现在有足够的声誉点来添加图像(哇!)，所以这里有一些图片来演示我所指的调整大小问题。当我放大/缩小时，文本不会与 Jersey 尺码成比例缩放。但是，如果我在放大/缩小后刷新页面，即从放大/缩小版本开始，文本大小会重新调整为当前 Jersey 尺寸并根据需要适合 Jersey 。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Jersey</title>
</head>
<body>
<svg id="jersey">
<switch>
<g>
<g id="jerseyShape">
<path id="outline" fill="green" transform="translate(-40,0)" opacity="0.35" fill="none" stroke="#000000" stroke-width="1.5" d="M116.462,113.911V39.01
c0,0-18.493-5.977-15.317-30.633c0,0-8.033-2.616-8.78-3.363S91.617,9.311,79.29,9.124h-1.305
C65.656,9.311,65.656,4.268,64.909,5.015s-8.778,3.363-8.778,3.363C59.305,33.034,40.813,39.01,40.813,39.01v74.901
C40.813,113.911,74.434,126.427,116.462,113.911z" />
</g>
<g id="jerseyContent">
<svg>
<text id="name" font-family="Verdana" text-anchor="middle" dominant-baseline="central">
Jordan
</text>
<!-- Dynamically re-size name to fit jersey -->
<script type="application/ecmascript">
//Get path's bounding rectangle
var pathNode = document.getElementById("outline");
var pRect = pathNode.getBoundingClientRect();
//Get text's bounding rectangle
var textNode = document.getElementById("name");
var tRect = textNode.getBBox();
//Calculate the necessary scale to make the text fit within the jersey width while
//not exceeding a height of 30
var widthRatio = (pRect.width * 0.85) / tRect.width;
var heightRatio = (pRect.height*0.3) / tRect.height;
var textScale = Math.min(widthRatio, heightRatio);
//Translate text to center of jersey and scale to fit
textNode.setAttribute("transform", "translate(" + (1 + pRect.width / 2) + " " + (pRect.top + pRect.height / 2) + ")scale(" + textScale + ")");
</script>
</svg>
</g>
</g>
</switch>
</svg>
</body>
</html>最佳答案
您还应该使用 getBBox() 来获取路径的大小。这样，即使在缩放后尺寸也会在相同的坐标空间中。
关于javascript - 使文本适合 SVG 路径，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30699275/