SVG元素上的多余边距

我有一个简单的SVG元素，其高度和宽度等于80%。我还将元素边距10%应用于页面上的SVG居中。但是，由于某种奇怪的原因，保证金似乎创建了一个y-overflow，以便页面可以滚动。这样做没什么意义，因为我应用的垂直和水平方向应该不超过100%。这里是我的代码：SVG元素上的多余边距

html, body {height: 100%;} 
 

 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
svg { 
 
    margin: 10%; 
 
    height: 80%; 
 
    width: 80%; 
 
    background: #ddd; 
 
} 
 

 
svg path { 
 
    fill: none; 
 
    stroke: #000; 
 
    stroke-linejoin: round; 
 
    transition: 0.2s; 
 
}

<svg viewBox="0 0 40 40"> 
 
    <path d="M15,5 l10,0 l0,10 l10,0 l0,10 l-10,0 l0,10 l-10,0 l0,-10 l-10,0 l0,-10 l10,0 l0,-10 Z" /> 
 
</svg>

从本质上讲，我希望SVG与利润百分比为中心的，我不想身体被滚动。

在此先感谢！

来源

2017-05-04 Hudson Taylor

将overflow-y:hidden添加到身体以防止滚动。这是下面的代码片段。

html, 
 
body { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    overflow-y: hidden; 
 
} 
 

 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
svg { 
 
    margin: 10%; 
 
    height: 80%; 
 
    width: 80%; 
 
    background: #ddd; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    margin: auto; 
 
    position:absolute; 
 
} 
 

 
svg path { 
 
    fill: none; 
 
    stroke: #000; 
 
    stroke-linejoin: round; 
 
    transition: 0.2s; 
 
}

<svg viewBox="0 0 40 40"> 
 
    <path d="M15,5 l10,0 l0,10 l10,0 l0,10 l-10,0 l0,10 l-10,0 l0,-10 l-10,0 l0,-10 l10,0 l0,-10 Z" /> 
 
</svg>

来源

2017-05-04 01:27:57 Santosh

谢谢！但是，这并没有帮助，因为我希望元素居中。 –

你可以使用绝对定位？我已经编辑了绝对定位的片段。 – Santosh

是的，我认为有几种方法可以做到这一点。但是，我更想了解为什么这种特定的方法不起作用。 –

检查definition of margin。百分比边际是相对于包含区块的宽度而计算的。

因此，您设置的顶部和底部边距太大。因此滚动。

解

垂直居中未知大小的元素是相当棘手。 CSS并不容易。但有一个小窍门，你可以使用as explained here。

这个想法是使用100％高度的第二个元素，然后垂直居中这两个元素，以便较小的元素（本例中为SVG）居中。

html, body {height: 100%;} 
 

 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
svg { 
 
    height: 80%; 
 
    width: 80%; 
 
    background: #ddd; 
 
    vertical-align: middle; 
 
} 
 

 
svg path { 
 
    fill: none; 
 
    stroke: #000; 
 
    stroke-linejoin: round; 
 
    transition: 0.2s; 
 
} 
 

 
.wrapper:before { 
 
    content: '\200B'; /* zero width space */ 
 
    display: inline-block; 
 
    height: 100%; 
 
    vertical-align: middle; 
 
} 
 

 
.wrapper { 
 
    text-align: center; 
 
    height: 100%; 
 
}

<div class="wrapper"> 
 

 
    <svg viewBox="0 0 40 40"> 
 
    <path d="M15,5 l10,0 l0,10 l10,0 l0,10 l-10,0 l0,10 l-10,0 l0,-10 l-10,0 l0,-10 l10,0 l0,-10 Z" /> 
 
    </svg> 
 

 
</div>

来源

2017-05-04 02:30:51

SVG元素上的多余边距

回答

相关问题