Horizontally align rect inside larger svg to right

Question

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.

Answer 1

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>