SVG要素の奇数余白

Question

私は、高さと幅が80%に等しい単純なSVG要素を持っています。私はまた、10%のマージンをこの要素に適用して、SVGをページの中央に配置します。しかし、何らかの奇妙な理由から、余白はy-overflowを作成しているためページがスクロール可能です。これは、私が最大で100%以下になるはずのスタイルを適用しているので、あまり意味がありません。ここに私のコードです：

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をパーセントマージンを中心にしたい、と私は体がスクロール可能になりたくありません。

ありがとうございます！

Answer 1

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>

Answer 2

definition of marginを確認してください。パーセンテージマージンは、収容ブロックの幅に対して計算されます。

したがって、上下の余白を大きく設定しています。したがって、スクロールします。

垂直未知の大きさの要素を中心にソリューション

かなりトリッキーです。 CSSで簡単にはできません。しかし、あなたはas explained hereを使うことができます少しトリックがあります。

考えられるのは、100％の高さの2番目の要素を使用してから、両方の要素を垂直方向に中央に配置し、小さい方（この場合は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>