中心对齐跨度标记中的SVG

我想中心对齐灰色框中的条形图。我已经尝试了各种方法（例如文本对齐：中心，或设置显示：块，边距：0自动）阅读相关的帖子，并没有一个似乎工作。中心对齐跨度标记中的SVG

这里的小提琴： 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>

来源

2015-08-27 nciao

编，看起来它是一个的搞乱这个单独的矩形宽度向上。是否有CSS方法来确定这些矩形的大小？或者我是否需要计算它们的宽度以完全适合父容器？ – nciao

updated fiddle here

SVG元素是内联，默认情况下，这样首先确保你已经将它设置为显示块元素。您可以指定一个边缘到中心，并适应它的父容器内的元素：

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

然后，您可以充分利用“视框”属性，以确保您的SVG元素将进行缩放以适合其父容器的边界：

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

在您的情况下，viewbox的宽度/高度应该总是与您显示的图形的大小相关联。（假设你想显示整个图形，反正。）

这里的视口和视框在SVG元素是如何一起玩一个很好的参考：http://jonibologna.com/svg-viewbox-and-viewport/

来源

2015-08-27 18:25:51 kirkyoder

，你可以给它一个宽度，然后留下了保证金，右相应

例如

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

fiddle

来源

2015-08-27 17:43:57

嗯，我想让它的利润率较小。看起来如果我将剩余边际/剩余边距减少到40％以下，它会再次失去对齐。 – nciao

那么你可以玩宽度只是一个例子。只要他们加起来就是100 –

中心对齐跨度标记中的SVG

回答

相关问题