CODEWITHSUNDEEP
htmlcsssvg
emdibee
emdibee

Reputation: 192

Horizontally align rect inside larger svg to right

I have an svg that contains a rect inside which is smaller in size. I want the rect to align right horizontally inside the svg. The following doesn't seem to work:

<svg width="400" 
     height="110" 
     style="background: grey; 
     display: flex; 
     justify-content: flex-end"
>
    <rect width="200" 
        height="50" 
        style="fill:rgb(0,0,255);
        stroke-width:3;
        stroke:rgb(0,0,0)"
   />  
</svg>

Display flex and justify-content are not working when it's for an svg. I need to understand two things:

  1. Why are flex styles not being applied to the svg?
  2. How do I align the rect to the right of the svg?

Thank you in advance.

Upvotes: 3

Views: 906

Answers (3)

ksav
ksav

Reputation: 20840

In SVG, you can only use a very limited number of CSS properties compared to HTML. As such, SVG elements don't know anything about display:flex.

So in your example, <rect> simply ignores those CSS rules it doesn't understand.

svg {
  background: grey;
  
  
  display: flex; /* Has no effect because <rect> doesn't understand display: flex */
  justify-content: flex-end; /* Has no effect because <rect> doesn't understand justify-content: flex-end */
}

rect {
  fill: rgb(0, 0, 255);
  stroke-width: 3;
  stroke: rgb(0, 0, 0);
}
<svg width="400" height="110">
    <rect width="200" height="50"/>  
</svg>

So you can do this with a translate transform

The translate(<x> [<y>]) transform function moves the object by x and y. If y is not provided, it is assumed to be zero.

svg {
  background: grey;
}

rect {
  fill: rgb(0, 0, 255);
  stroke-width: 3;
  stroke: rgb(0, 0, 0);
}
<svg width="400" height="110">
    <rect width="200" height="50" transform="translate(197,0)"/> 
</svg>

Or with an x attribute

This attribute determines the x coordinate of the rect.

Value type: <length>|<percentage>

svg {
  background: grey;
}

rect {
  fill: rgb(0, 0, 255);
  stroke-width: 3;
  stroke: rgb(0, 0, 0);
}
<svg width="400" height="110">
    <rect width="200" height="50" x="197"/> 
</svg>

Upvotes: 0

לבני מלכה
לבני מלכה

Reputation: 16261

Use transform: translate(); to rect

<h3>right up</h3>
<svg width="400" height="110" style="background: grey; display: flex; justify-content: flex-end">
  <rect width="200" height="50" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0);transform: translate(49.5%,2%);" />  
</svg>
<h3>right down</h3>
<svg width="400" height="110" style="background: grey; display: flex; justify-content: flex-end">
  <rect width="200" height="50" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0);transform: translate(49.5%,52%);" />  
</svg>
<h3>right center</h3>
<svg width="400" height="110" style="background: grey; display: flex; justify-content: flex-end">
  <rect width="200" height="50" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0);transform: translate(49.5%,30%);" />  
</svg>

Edit

Use x="" y="" 

    <h3>right up</h3>
    <svg width="400" height="110" style="background: grey; display: flex; justify-content: flex-end">
      <rect width="200" height="50" x="198" y="2" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0);" />  
    </svg>

Upvotes: 1

abhndv
abhndv

Reputation: 209

SVG don't have float,justify alignment elements like in html.

So you should either use

transform:translate();

Or while making svg you can give position using x and y coordinates.

<svg width="400" height="110" style="background: grey;">
<rect width="200" height="50" x="197" y="3" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />  
</svg>

Upvotes: 1

Related Questions