中心在span标记中对齐SVG

Posted 2021-04-03

我正试图将条形图中心对齐在灰色框中。我已经尝试了各种方法（例如text-align：center，或者设置display：block，margin：0 auto）来阅读相关的帖子，但它们似乎都不起作用。

这是小提琴：http://jsfiddle.net/nickciao/F6R9C/93/

html：

<div id="Tile">
<h2>
     <span id="Top">0.0%</span>
</h2>
<ul class="Middle">
    <span>2.9k</span>
         USERS
    <span>BECAME ACTIVE</span>
</ul>
<div id="Bottom" >
    <div>
    <svg id="svg">
        <g transform="translate(5,5)">
            <rect y="23.33333333333333" x="15" height="11.666666666666671" width="5">
            </rect>
            <rect y="35" x="21" height="0" width="5">
            </rect>
            <rect y="25.666666666666686" x="27" height="9.333333333333314" width="5">
            </rect>
            <rect y="35" x="33" height="4.666666666666686" width="5">
            </rect>
            <rect y="25.666666666666686" x="39" height="9.333333333333314" width="5">
            </rect>
            <rect y="25.666666666666643" x="45" height="9.333333333333357" width="5">
            </rect>
            <rect y="25.666666666666686" x="51" height="9.333333333333314" width="5">
            </rect>
            <rect y="30.333333333333343" x="57" height="4.666666666666657" width="5">
            </rect>
            <rect y="32.666666666666686" x="63" height="2.3333333333333144" width="5">
            </rect>
            <rect y="32.66666666666664" x="69" height="2.333333333333357" width="5">
            </rect>
            <rect y="16.33333333333333" x="75" height="18.66666666666667" width="5">
            </rect>
            <rect y="32.666666666666686" x="81" height="2.3333333333333144" width="5">
            </rect>
            <rect y="35" x="87" height="0" width="5">
            </rect>
            <rect y="35" x="93" height="20.999999999999993" width="5">
            </rect>
            <rect y="35" x="99" height="34.999999999999986" width="5">
            </rect>
        </g>
    </svg>
    </div>
</div>

答案

updated fiddle here

默认情况下，SVG元素是内联的，因此首先要确保将其设置为显示块元素。您可以指定要居中的边距，并将元素放在其父容器中：

#svgContainer svg {
    display: block;
    margin: 0 auto;
}

然后，您可以利用“viewbox”属性来确保SVG元素可以缩放以适合其父容器的边界：

<svg viewbox="0 0 120 80" height="80">

在您的情况下，视图框宽度/高度应始终与您正在显示的图形的大小相关联。 （假设你想显示整个图表，无论如何。）

这里有一个关于视口和视图框如何在SVG元素中一起播放的很好的参考：http://jonibologna.com/svg-viewbox-and-viewport/

另一答案

你可以给它一个宽度，然后相应地左右边距

EG

span svg {
    width:20%;
    margin-right:40%;
    margin-left:40%;}

fiddle