SVG：如何基于 <Rect/> 位置和大小以编程方式居中 <Text/>

Posted 2023-03-06

【中文标题】SVG：如何基于 <Rect/> 位置和大小以编程方式居中 <Text/>

【英文标题】：SVG: How to programmatically center an <Text/> based on <Rect/> position and size

【发布时间】：2022-01-21 15:52:22

【问题描述】：

我在 Figma 上制作了这个数独板

我想用 ReactJS 把它放到我的网站上。我的目标是将事件侦听器添加到矩形并根据用户按下 1-9 数字来更改值（就像数独一样）。问题是我不知道如何根据rect (x,y) 位置和大小以编程方式定位text。

例如：

<g x="7.49219" y="4.37108"  >
       <rect
            x="7.49219"
            y="4.37108"
            
            
            rx="4.75"
            stroke="#D5D5D5"
            stroke-
       />
       <text id="text_test" fill="red" fontSize=24>
           5
       </text>
</g>

我将文本位置计算为

x = rectXPos + (rectWidth / 2)

y = rectYPos + (rectHeight / 2)

但它给了我：

我想考虑公式中的文本宽度和高度以使其居中。但我只是在浏览器上以像素为单位获取文本大小

所以当我尝试将公式更新为

x = rectXPos + (rectWidth / 2) - (textWidth / 2)

y = rectYPos + (rectHeight / 2) + (textHeight / 2)

我明白了：

X 位置有效，但 Y 无效。

我错过了什么？ 有没有更好的方法来实现我想要的？

【问题讨论】：

您必须使用 SVG 吗？使用 html 和 CSS 布置网格会容易得多。

使用text-anchor="middle" 和text-anchor="middle" 作为文本属性或css

@HunterMcMillen 嗯，我有点想学习如何使用 SVG，但如果这对于这种情况来说似乎是一个不好的选择，那么我将只更改为 HTML

@enxaneta 它不起作用，它将文本对齐到 SVG 中心，我必须根据 rect 对齐

您正在使用计算出的矩形中心作为文本的 x 和 y 属性

【参考方案1】：

您可以使用属性text-anchor="middle" 和dominant-baseline="middle" 重新排列文本元素，并将位置设置在预期“框架”的中间。因此，在这种情况下，<rect> 和 <text> 具有相同的起点。 <rect> 是 40x40，然后 <text> 需要在 20,20。

您可以从示例中看到，您可以使用<g> 及其属性transform/translate 来移动元素。既然您需要放置 9x9 元素，这将提供更多可读性的代码。

如果要在浏览器中使用，我建议您使用 CSS 进行样式设置。比如用如下样式表替换属性stroke 等：

svg.sudoku rect 
  stoke: #D5D5D5;
  stroke-width: .5px;

<svg viewBox="0 0 200 200">
  <g transform="translate(5 5)">
    <g transform="translate(0 0)">
      <rect
        
        
        rx="4.75"
        stroke="#D5D5D5"
        stroke-
        fill="none"
        />
      <text x="20" y="20" text-anchor="middle" dominant-baseline="middle" fill="red" font-size="20">5</text>
    </g>
    <g transform="translate(45 0)">
      <rect
        
        
        rx="4.75"
        stroke="#D5D5D5"
        stroke-
        fill="none"
        />
      <text x="20" y="20" text-anchor="middle" dominant-baseline="middle" fill="red" font-size="20">2</text>
    </g>
  </g>
</svg>