将SVG元素对齐以垂直和水平显示中心

时间：2018-01-02 10:47:18

标签： css css3 svg

我有一个SVG元素，它将被重用并且大小不同。截至目前，我必须手动调整视图框以使其显示为中心。无论任何大小，都有任何svg解决方案可以居中。

<svg width="200" height="200" viewbox="0 0 100 100" preserveAspectRatio="xMidYMid" fill="#000">
  <use xlink:href="#home"></use>
</svg>

<svg width="200" height="200" viewbox="0 0 200 200">
  <use xlink:href="#home"></use>
</svg>

<svg style="display:none">
  <symbol id="home">
    <path d="M12.3469758,5.06253201 L14.1823758,6.54832612 C14.2573758,6.61066436 14.3735758,6.64123789 14.4641758,6.64123789 C14.5781758,6.64123789 14.7043758,6.59299524 14.7833758,6.49928936 C14.9253758,6.33113495 14.9095758,6.08078936 14.7401758,5.94003201 L7.71597578,0.0913555356 C7.64157578,0.0294143591 7.55297578,0.000826123823 7.46277578,0.000230535587 C7.45637578,-0.000365052648 7.45037578,0.000429064999 7.44397578,3.20061754e-05 C7.43757578,0.000429064999 7.43137578,-0.000365052648 7.42497578,0.000230535587 C7.33477578,0.000826123823 7.24477578,0.0294143591 7.17037578,0.0913555356 L0.142975778,5.94003201 C-0.0262242219,6.08078936 -0.0484242219,6.33133348 0.0933757781,6.49928936 C0.172575778,6.59299524 0.285975778,6.64123789 0.400175778,6.64123789 C0.490975778,6.64123789 0.531975778,6.61086289 0.606975778,6.54832612 L1.94677578,5.39169377 L1.94677578,11.6271055 C1.94677578,12.4944805 2.85697578,13.2087894 3.74657578,13.2087894 L10.9465758,13.2087894 C11.7877758,13.2087894 12.3467758,12.5564217 12.3467758,11.6271055 L12.3469758,5.06253201 Z M10.9467758,12.4146717 L9.54697578,12.4146717 L4.94697578,12.4146717 L3.74677578,12.4146717 C3.30097578,12.4146717 2.74697578,12.0547379 2.74697578,11.6271055 L2.74697578,4.74766436 C2.74697578,4.74091436 2.79537578,4.73436289 2.79497578,4.72741436 L7.41997578,0.899370241 L11.6883758,4.48302465 C11.6245758,4.55330406 11.5471758,4.64542171 11.5471758,4.74766436 L11.5469758,11.6271055 C11.5469758,12.0513629 11.3849758,12.4146717 10.9467758,12.4146717 Z" id="Shape" fill-rule="nonzero"></path>
    <path d="M8.25,7.5 L6,7.5 L6,12.75 L5.25,12.75 L5.25,7.125 C5.25,6.91789322 5.41789322,6.75 5.625,6.75 L6,6.75 L8.625,6.75 C8.83210678,6.75 9,6.91789322 9,7.125 L9,7.5 L9,7.875 C9,8.08210678 8.83210678,8.25 8.625,8.25 C8.41789322,8.25 8.25,8.08210678 8.25,7.875 L8.25,7.5 Z M8.625,9 C8.83210678,9 9,9.16789322 9,9.375 L9,12.375 C9,12.5821068 8.83210678,12.75 8.625,12.75 C8.41789322,12.75 8.25,12.5821068 8.25,12.375 L8.25,9.375 C8.25,9.16789322 8.41789322,9 8.625,9 Z" id="Combined-Shape"></path>
  </symbol>
</svg>

另请参阅fiddle

2 个答案:

答案 0 :(得分：3)

为什么不简单地调整视图框，使图标占据svg的整个空间，然后使用高度/宽度控制其大小，对于使用另一个div的对象。

因此，您可以轻松控制图标的大小和框的大小，并使用任何常用技术（我在这种情况下使用flex）将SVG居中并且您不必每次都更改viewbox：

svg {
 border:1px solid;
}

.box {
  width:200px;
  height:200px;
  border:1px solid red;
  display:inline-flex;
  vertical-align:top;
  justify-content:center;
  align-items:center;
}
<div class="box">
<svg width="50" height="50" viewbox="0 0 15 14"  preserveAspectRatio="xMidYMid" fill="#000">
   <use xlink:href="#home"></use>
 </svg>
 </div>
 <div class="box">
<svg width="20" height="20" viewbox="0 0 15 14"  preserveAspectRatio="xMidYMid" fill="#000">
   <use xlink:href="#home"></use>
 </svg>
 </div>
 
 
 
 
 
 
 
 
 <svg style="display:none;">
 <symbol id="home" >
           <path d="M12.3469758,5.06253201 L14.1823758,6.54832612 C14.2573758,6.61066436 14.3735758,6.64123789 14.4641758,6.64123789 C14.5781758,6.64123789 14.7043758,6.59299524 14.7833758,6.49928936 C14.9253758,6.33113495 14.9095758,6.08078936 14.7401758,5.94003201 L7.71597578,0.0913555356 C7.64157578,0.0294143591 7.55297578,0.000826123823 7.46277578,0.000230535587 C7.45637578,-0.000365052648 7.45037578,0.000429064999 7.44397578,3.20061754e-05 C7.43757578,0.000429064999 7.43137578,-0.000365052648 7.42497578,0.000230535587 C7.33477578,0.000826123823 7.24477578,0.0294143591 7.17037578,0.0913555356 L0.142975778,5.94003201 C-0.0262242219,6.08078936 -0.0484242219,6.33133348 0.0933757781,6.49928936 C0.172575778,6.59299524 0.285975778,6.64123789 0.400175778,6.64123789 C0.490975778,6.64123789 0.531975778,6.61086289 0.606975778,6.54832612 L1.94677578,5.39169377 L1.94677578,11.6271055 C1.94677578,12.4944805 2.85697578,13.2087894 3.74657578,13.2087894 L10.9465758,13.2087894 C11.7877758,13.2087894 12.3467758,12.5564217 12.3467758,11.6271055 L12.3469758,5.06253201 Z M10.9467758,12.4146717 L9.54697578,12.4146717 L4.94697578,12.4146717 L3.74677578,12.4146717 C3.30097578,12.4146717 2.74697578,12.0547379 2.74697578,11.6271055 L2.74697578,4.74766436 C2.74697578,4.74091436 2.79537578,4.73436289 2.79497578,4.72741436 L7.41997578,0.899370241 L11.6883758,4.48302465 C11.6245758,4.55330406 11.5471758,4.64542171 11.5471758,4.74766436 L11.5469758,11.6271055 C11.5469758,12.0513629 11.3849758,12.4146717 10.9467758,12.4146717 Z" id="Shape" fill-rule="nonzero"></path>
            <path d="M8.25,7.5 L6,7.5 L6,12.75 L5.25,12.75 L5.25,7.125 C5.25,6.91789322 5.41789322,6.75 5.625,6.75 L6,6.75 L8.625,6.75 C8.83210678,6.75 9,6.91789322 9,7.125 L9,7.5 L9,7.875 C9,8.08210678 8.83210678,8.25 8.625,8.25 C8.41789322,8.25 8.25,8.08210678 8.25,7.875 L8.25,7.5 Z M8.625,9 C8.83210678,9 9,9.16789322 9,9.375 L9,12.375 C9,12.5821068 8.83210678,12.75 8.625,12.75 C8.41789322,12.75 8.25,12.5821068 8.25,12.375 L8.25,9.375 C8.25,9.16789322 8.41789322,9 8.625,9 Z" id="Combined-Shape"></path>
        </symbol>
        </svg>

答案 1 :(得分：1)

 

svg{
  margin: auto;
 }
.content {
  width:200px;
  height:200px;
  border:1px solid #ececec;
  display:inline-flex;
  align-items:center;
}
<div class="content">
<svg width="60" height="60" viewbox="0 0 15 14"  preserveAspectRatio="xMidYMid" fill="#000">
   <use xlink:href="#home"></use>
 </svg>
 </div>
 <div class="box">
<svg width="20" height="20" viewbox="0 0 15 14"  preserveAspectRatio="xMidYMid" fill="#000">
   <use xlink:href="#home"></use>
 </svg>
 </div>
 
 
 
 
 
 
 
 
 <svg style="display:none;">
 <symbol id="home" >
           <path d="M12.3469758,5.06253201 L14.1823758,6.54832612 C14.2573758,6.61066436 14.3735758,6.64123789 14.4641758,6.64123789 C14.5781758,6.64123789 14.7043758,6.59299524 14.7833758,6.49928936 C14.9253758,6.33113495 14.9095758,6.08078936 14.7401758,5.94003201 L7.71597578,0.0913555356 C7.64157578,0.0294143591 7.55297578,0.000826123823 7.46277578,0.000230535587 C7.45637578,-0.000365052648 7.45037578,0.000429064999 7.44397578,3.20061754e-05 C7.43757578,0.000429064999 7.43137578,-0.000365052648 7.42497578,0.000230535587 C7.33477578,0.000826123823 7.24477578,0.0294143591 7.17037578,0.0913555356 L0.142975778,5.94003201 C-0.0262242219,6.08078936 -0.0484242219,6.33133348 0.0933757781,6.49928936 C0.172575778,6.59299524 0.285975778,6.64123789 0.400175778,6.64123789 C0.490975778,6.64123789 0.531975778,6.61086289 0.606975778,6.54832612 L1.94677578,5.39169377 L1.94677578,11.6271055 C1.94677578,12.4944805 2.85697578,13.2087894 3.74657578,13.2087894 L10.9465758,13.2087894 C11.7877758,13.2087894 12.3467758,12.5564217 12.3467758,11.6271055 L12.3469758,5.06253201 Z M10.9467758,12.4146717 L9.54697578,12.4146717 L4.94697578,12.4146717 L3.74677578,12.4146717 C3.30097578,12.4146717 2.74697578,12.0547379 2.74697578,11.6271055 L2.74697578,4.74766436 C2.74697578,4.74091436 2.79537578,4.73436289 2.79497578,4.72741436 L7.41997578,0.899370241 L11.6883758,4.48302465 C11.6245758,4.55330406 11.5471758,4.64542171 11.5471758,4.74766436 L11.5469758,11.6271055 C11.5469758,12.0513629 11.3849758,12.4146717 10.9467758,12.4146717 Z" id="Shape" fill-rule="nonzero"></path>
            <path d="M8.25,7.5 L6,7.5 L6,12.75 L5.25,12.75 L5.25,7.125 C5.25,6.91789322 5.41789322,6.75 5.625,6.75 L6,6.75 L8.625,6.75 C8.83210678,6.75 9,6.91789322 9,7.125 L9,7.5 L9,7.875 C9,8.08210678 8.83210678,8.25 8.625,8.25 C8.41789322,8.25 8.25,8.08210678 8.25,7.875 L8.25,7.5 Z M8.625,9 C8.83210678,9 9,9.16789322 9,9.375 L9,12.375 C9,12.5821068 8.83210678,12.75 8.625,12.75 C8.41789322,12.75 8.25,12.5821068 8.25,12.375 L8.25,9.375 C8.25,9.16789322 8.41789322,9 8.625,9 Z" id="Combined-Shape"></path>
        </symbol>
        </svg>

相关问题
最新问题