时间戳

首页 > 解决方案 > 将较大 svg 内的矩形水平对齐到右侧

html - 将较大 svg 内的矩形水平对齐到右侧

问题描述

我有一个svg包含一个rect尺寸较小的内部。我希望rect在svg. 以下似乎不起作用：

<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>

当flex它justify-content用于svg. 我需要明白两件事：

  1. 为什么flex样式不应用于svg?
  2. 如何将rect右对齐svg？

先感谢您。

标签： htmlcsssvg

解决方案

用于transform: translate();_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>

编辑

采用 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>

推荐阅读