Question

我想在<text>和<svg>中的同一个x坐标中对齐多个<text> 用<rect>围绕x。

我指定了<text>的{{1}}属性来对齐多个<text>，和我得到了<text>的坐标和getBBox()来确定<rect>的x位置。但是，getBBox().x与某些x中的指定<text>不同，但<g>包括<text>和<rect>尚未转化。< / p>

为什么他们不一样？如何设置<text>的绝对x坐标（例如，在以下代码中为零），和如何获得<text>的绝对x坐标？

我在Windows 10（64位）上的Chrome 59（64位）上执行了以下代码。

更新

当我在Firefox上运行代码时，我使用getBBox().x作为x的{{1}}属性获得了相同（预期）的x坐标。

Chrome需要额外的工作吗？

<text>

const PADDING = 5
const BOX_X = 10

const data = [
  {text: "My"},
  {text: "x"},
  {text: "coordinate"},
  {text: "is"},
  {text: "zero?"}
]

const box = d3.select("svg#svg")
  .selectAll(".text-rect")
  .data(data)
  .enter()
  .append("g")
  .classed("text-rect", true)

// draw text
const text = box
  .append("text")
  .attr("text-anchor", "start")
  .attr("font-family", "Arial")
  .attr("x", 0) // <- I set `x` to zero here
  .attr("y", 0)
  .text((d) => d.text)
  .each(function(d){ d.textBBox = this.getBBox() })

// surround text using coorrdinates from `getBBox()` of `<text>`
box
  .append("rect")
  .attr("x", (d) => d.textBBox.x - PADDING)
  .attr("y", (d) => d.textBBox.y - PADDING)
  .attr("width", (d) => d.textBBox.width + 2 * PADDING)
  .attr("height", (d) => d.textBBox.height + 2 * PADDING)
  .attr("fill", "none")
  .attr("stroke", "black")
  .attr("stroke-width", 1)

// avoid overlap
box
  .each(function(d){ d.bbox = this.getBBox() })
  .attr("transform", function(d, i) {
    let oldY = d.bbox.y
    d.bbox.y = (i==0)? 0 : box.data()[i-1].bbox.y + box.data()[i-1].bbox.height
    return `translate(${BOX_X},${d.bbox.y - oldY})`
  });

// show coordinates
const div = d3.select("div#coordinates")
  .selectAll("p")
  .data(text.data())
  .enter()
  .append("p")
  .text((d) => `"${d.text}": (${d.textBBox.x}, ${d.textBBox.y})`)
// I set `x` attribute of `<text>` to zero,
// but `getBBox()` returned a different x coordinate.

Answer 1

它被称为＆＃34; side bearing＆＃34;。它是字符X位置和字形左（或右）之间的差异。例如，圆形字符如＆＃34; O＆＃34;当与上方或下方的其他文本保持对齐时，可能需要略微向左伸出以看起来光学正确。

以下图片并未说明这一点，但确实显示了侧面轴承。

来源：https://developer.apple.com/library/content/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/TypoFeatures/TextSystemFeatures.html

如何在svg中设置文本的绝对x坐标？

1 个答案: