jsfiddle

Question

是否有一个rect等同于text的text-anchor表示属性？

我希望能够从左/右侧放置一个矩形或根据情况。我知道可以通过一些简单的计算来完成，但我只是想知道是否存在内置的东西。

文本锚定演示属性的链接... https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor

Answer 1

我正在寻找同样的问题，发现这篇文章没有答案。这个问题已经很老了，但是我把这个解决方案放在这里可能会像我一样寻找它。

当指定svg rect的（x，y）时，它被视为：“将rect的左上角放在点（x，y）”。但是有人可能希望（x，y）被视为：“嘿，将我的矩形的中心放在（x，y）”或“嘿，放在右上角我的矩阵在（x，y）“。为此使用了锚机制，但在svg中没有这样的机会。

你仍然可以通过变换（使用css或属性）实现锚机制。这是可能的，因为transform.translate中的百分比值是相对于应用的形状计算的，而不是其父级。

解决方案仅适用于现在的工作

所以要实现“嘿，将我的矩形的中心放在（x，y）”，你需要将锚设置为（0.5,0.5）。这是如何通过变换完成的：

.rect-anchor-50-50 {
  /* 
    Precents in translate are calculated relative to
    the applied rectangle, but not its parent.
    Set anchor to (0.5, 0.5) or (center, center).
    */
  transform: translate(-50%, -50%);
}

jsfiddle

上的代码段

.rect-anchor-0-0 {
  fill: #afafaf;
}
.rect-anchor-50-50 {
  /* 
    precents in translate are calculated relative to
    the applied rectangle, but not its parent
    */
  transform: translate(-50%, -50%);
  fill: #afcfae;
  opacity: 0.75;
}
.group {
  fill: red;
}
svg {
  fill: lightblue;
}

<!-- One can use translate with percents to achieve anchor like mechanics -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300">
  <rect fill="lightblue" x="0" y="0" width="100%" height="100%"></rect>

  <!-- Use translate to achieve anchor mechanics -->
  <rect class="rect-anchor-0-0" x="150" y="150" width="200" height="35" />
  <rect class="rect-anchor-50-50" x="150" y="150" width="200" height="35" />

  <!-- Rect x,y position mark for convenience -->
  <circle cx="150" cy="150" r="2" fill="red"></circle>
</svg>

Answer 2

其他SVG元素（包括rect）没有这样的内容，请参阅the spec。你必须自己计算一下这个位置。

Answer 3

如果要在添加后立即执行：

    .append('rect')
      .attr('width', 10)
      .attr('height', 5)
      // Center rectangle
      .attr('transform', function() {
        return `translate(-${this.getAttribute('width') / 2}` +
          `, -${this.getAttribute('height') / 2})`;
      });

Rect相当于text的text-anchor表示属性？

3 个答案:

jsfiddle