CODEWITHSUNDEEP
svgd3.js
user1026130
user1026130

Reputation:

Rect's equivalent to text's text-anchor presentation attribute?

Is there a rect's equivalent to text's text-anchor presentation attribute?

I want to be able to position a rect from its left/right side or depending on the situation. I know that it could be done with some simple calculations, but I'm just wondering if something already built-in exists.

Link on text-anchor presentation attribute... https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor

Upvotes: 16

Views: 12451

Answers (3)

Jon Portella
Jon Portella

Reputation: 1336

If you want to do it right after appending:

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

Upvotes: 2

garek
garek

Reputation: 381

I was searching for the same question, and found this post with no answer. The question is pretty old, but i put here the solution for someone may look for it as i did.

When one specifies (x, y) of a svg rect it is treated like: "Place the left top corner of the rect at the point (x, y)". But one may want (x, y) to be treated as: "Hey, place the center of my rect at (x, y)" or "Hey, place the top right corner of my rect at (x, y)". For this anchor mechanics is used, but there is no such in svg.

You can still achieve anchor mechanics with transform (using css or attribute). It is possible since percent values in transform.translate are calculated relative to applied shape, but not its parent.

THE SOLUTION WORKS ONLY IN CHROME FOR NOW

So to achieve "Hey, place the center of my rect at (x, y)" you need to set anchor to (0.5, 0.5). Here how it is done with 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%);
}

Code Snippet on 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>

Upvotes: 8

Lars Kotthoff
Lars Kotthoff

Reputation: 109232

There is nothing like this for other SVG elements (including rect), see the spec. You'll have to calculate the position yourself.

Upvotes: 1

Related Questions