Question

我有一条SVG路径绘制了球衣的轮廓，我希望将球员放在中心位置。那件球衣内的姓氏。此外，由于我将不同长度的名字放入球衣，我想让文字的大小动态缩放以适应球衣。

我能够将文本置于一个涉及getBoundingClientRect（）的数学中心，但是我正在努力调整文本的动态大小。它起初看起来很好，但是当我调整屏幕大小时，文字大小不会与平针织物的大小成比例。

我已在下方附带了一段代码片段以进行演示。请帮助我理解为什么这个大小问题正在发生，以及我可以做些什么来实现正确的文本大小调整。

编辑：我现在有足够的声望点来添加图像（喔！），所以这里有一些图片来展示我所指的调整大小的问题。当我放大/缩小时，文字不会与平针织物尺寸成比例缩放。但是，如果我在放大/缩小后刷新页面，即我开始使用放大/缩小版本，则文本大小会重新调整到当前的平针尺寸并根据需要调整平针织物。

original size zoomed out zoomed in

＆＃13;

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

＆＃13;

Answer 1

您还应该使用getBBox()来获取路径的大小。这样，即使在缩放后，尺寸也将处于相同的坐标空间中。

Answer 2

问题是因为您正在计算包含textnode的组的比例。

我通过给出整个g元素的比例来解决你的问题，id =＆＃34; full＆＃34;

现在，您可以更改 id =＆＃34;完整＆＃34; 的比例值，并在没有标签输出的情况下获得所需的结果。我更新了代码，以便在放大缩小时考虑缩放值（ctrl + / ctrl - ）

＆＃13;

$(window).on("resize", function(){ 
  var scale = "scale("+window.devicePixelRatio+")"
  $("#full").attr("transform", scale)
  console.log($("#full").attr("transform"));
  
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="utf-8">
      <title>Jersey</title>
    </head>
    
    <body style="width:100%; height:100%">
      <svg style="    height: 602px;    width: 100%;">
          <g id="full" transform="scale(1)">
            <g id="jerseyShape" transform="translate(-40,0)">
              <path id="outline" fill="green" 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" />
                <text id="name" transform="translate(80,80)" font-family="Verdana" text-anchor="middle" dominant-baseline="central">
                  Jordan
                </text>                           
            </g>
          </g>
      </svg>
    </body>
    
    </html>

＆＃13;

将文本拟合到SVG路径中

2 个答案: