Rect эквивалентно тексту якорного атрибута представления текста?

Question

Есть ли прямоугольник, эквивалентный атрибуту привязки текста?

Я хочу иметь возможность позиционировать прямоугольник с левой / правой стороны или в зависимости от ситуации. Я знаю, что это можно сделать с помощью простых вычислений, но мне просто интересно, существует ли что-то уже встроенное.

Ссылка на атрибут представления привязки текста... https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor

Answer 1

Я искал тот же вопрос и нашел этот пост без ответа. Вопрос довольно старый, но я поставил здесь решение, для которого кто-то может искать его, как и я.

Когда указывается (x, y) прямоугольника svg, он обрабатывается следующим образом: "Поместите левый верхний угол прямоугольника в точку (x, y)". Но можно хотеть, чтобы (x, y) обрабатывалось как: "Эй, поместите центр моего прямоугольника в (x, y)" или "Эй, поместите верхний правый угол моего прямоугольника в (x, y)". Для этого используется механика якоря, но в svg такого нет.

Вы все еще можете достичь механики привязки с помощью transform (используя css или атрибут). Это возможно, поскольку процентные значения в transform.translate рассчитываются относительно применяемой формы, но не ее родителя.

РЕШЕНИЕ РАБОТАЕТ ТОЛЬКО В ХРОМЕ НА СЕЙЧАС

Таким образом, чтобы достичь "Эй, поместите центр моего прямоугольника в (x, y)", вам нужно установить привязку в (0.5, 0.5). Вот как это делается с помощью transform:

.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), см. спецификацию Вам придется рассчитать позицию самостоятельно.

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})`;
      });