web-dev-qa-db-ja.com

SVGタグを垂直方向に中央揃え

SVGタグを垂直方向の中央に配置する方法を見つけようとしています。

基本的に、これは私が中央揃えしようとしている単純化されたSVGコードです：

<svg height="272" style="background-color:transparent;margin-left: auto; margin-right: auto;" width="130" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g style="font-size: 0.7em;" transform="scale(1 1) rotate(0) translate(0 270)">
        <g id="1" style="font-size: 0.7em;">
            <image height="32" width="32" x="49" xlink:href="../../images/JOB.GIF" y="-270"/>
        </g>
    </g>
</svg>

ページの中央（水平方向）に配置しても問題ありませんが、垂直方向にも中央揃えにしたいのですが。

ラッパーを追加できますが、SVGサイズやウィンドウサイズに依存しない、これを行う一般的な方法を知りたいのですが。

私は複数の方法を試しましたが、何もうまくいきませんでした。

おかげで、

csshtmlsvgcenter
14
Cuva

現在のブラウザにはそれに対するより良い解決策があるので、私はこの回答を更新しました。

どのように賢い人が言った、最初の年はhtmlとcssを学び、もう数年は高度なJavaScriptを学び、5年後には最終的にdivを垂直方向に中央揃えする方法を学びます。

cSSで何かを垂直/水平に配置するには、それを使用できます。

<div class="outside">
    <div class="inside">Whatever</div>
</div>

およびcss：

.outside{
    position:relative;
}
.inside{
    position:absolute;
    top:50%;
    bottom:50%;
    transform:translate(-50%, -50%);
}

その唯一の問題は、要素が高さを生成しないことです。

古い答え：

高さと幅があるので、margin : auto auto;

またはそれをdivに入れます

position:absolute ;
left:50% ;
margin-left: -(half of width of image)px;
top:50% ;
margin-top: -(half of height of image)px;

あなたがそれで何かをするなら、2番目のものはより良いでしょう（JavaScriptアニメーションか何か）

私はそれをチェックしませんでしたが、おそらくsvgの2番目のオプション（外側のdivなし）も使用できます

19
Maciej Paprocki

それは簡単です！

HTML：

<div class="a">
<div class="b">
<div class="c">
<!-- Your SVG Here -->
</div>
</div>
</div>

CSS：

<style>
.a {
display: table;
position: absolute;
height: 100%;
width: 100%;
}

.b {
display: table-cell;
vertical-align: middle;
}

.c {
margin-left: auto;
margin-right: auto; 
height: /* Your size in px, else it will expand to your screen size!*/
width:  /* Your size in px, else it will expand to your screen size!*/
}
</style>
2
Mohit Mohan

svg要素にviewBox属性を指定し、それをwidth＆height属性に100%に設定すると、すべて正常に動作するはずです（ほとんどのブラウザ..）

$(document).ready(function(){
  $(".panel-left").resizable({handleSelector: ".splitter",containment: "parent"});
});
#ctr
{
        position:        absolute;
        border:          1px solid #131313;    
        top:             5%;
        left:            5%;
        bottom:          5%;
        right:           5%;    
        display:         flex;
        flex-direction:  row;    
}

#ctr svg
{
        height:    100%;
        width:     100%;
}

.panel-left 
{
  flex:         0 0 auto;
  padding:      10px;
  width:        50px;
  min-height:   50px;
  min-width:    50px;
  max-width:    80%;
  max-height:   100%;
  white-space:  nowrap;
  background:   #131313;
  color:        white;
}

.splitter 
{
  flex:         0 0 auto;
  width:        18px;  
}

.panel-right 
{
  flex:         1 1 auto;
  padding:      10px;
  min-width:    20px;
  background:   #eee;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>


<div style="visibility:hidden; position:absolute; width:0">
        <svg>
          <g id="my-funky-svg-defs">
                <defs>
                  <radialGradient id="gradient" cx="25%" cy="25%" r="100%" fx="40%" fy="40%">
                        <stop offset=  "0%" stop-color="hsla(313,  80%, 80%, 1)"/>
                        <stop offset= "40%" stop-color="hsla(313, 100%, 65%, 1)"/>
                        <stop offset="110%" stop-color="hsla(313, 100%, 50%, 0.7)"/>
                  </radialGradient>
                </defs>    
                <title>smarteee</title>
                <circle  class="face" cx="200" cy="200" r="195" fill="url(#gradient)" />
                <ellipse class="eye eye-left" cx="140" cy="150" rx="10" ry="40" fill="#131313"/>
                <ellipse class="eye eye-right" cx="260" cy="150" rx="10" ry="40" fill="#131313"/>
                <path class="smile" d="M120,280 Q200,330 280,280" stroke-width="10" stroke="#131313" fill="none" stroke-linecap="round"/>
          </g>
        </svg>
</div>

<div id=ctr>
        <div class="panel-left">
          <svg viewBox="0 0 400 400"><use xlink:href="#my-funky-svg-defs"></use></svg>        
        </div>

        <div class="splitter">
        </div>

        <div class="panel-right">
          <svg viewBox="0 0 400 400"><use xlink:href="#my-funky-svg-defs"></use></svg>        
        </div>
</div>

＆ここで遊ぶのに対応するjsfiddleです

注意：preserveAspectRatio設定と連動するviewBox属性もあります。例：preserveAspectRatio="xMidYMid meet"

1
violet313

あなたは使ってみることができます flexbox。

シンプルなHTML：

<div class="outside">
    <svg />
</div>

CSS：

.outside {
    display: flex;
    align-items: center; /* vertical alignment */
    justify-content: center; /* horizontal alignment */
}

サンプルを含むHTML：

<div class="outside">
    <svg height="272" style="background-color:transparent;margin-left: auto; margin-right: auto;" width="130" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <g style="font-size: 0.7em;" transform="scale(1 1) rotate(0) translate(0 270)">
            <g id="1" style="font-size: 0.7em;">
                <image height="32" width="32" x="49" xlink:href="../../images/JOB.GIF" y="-270"/>
            </g>
        </g>
    </svg> 
</div>
0
gilalberto