svgの内容を垂直にセンタリングする部分

Question

私はCSS/JSの中にsvgのパス/テキストの集合体を垂直に集中させようとしていました。私がここで見つけた解決策のどれもこれまでに働いたことはありません。私は複数のコンテンツを持っているとは思えませんが、<テキスト>、<円>、< rect>を持っています。

高さは可変なので、私は2つの方法を考えました： 1）50％で変換します。これは、私がこれまでに見つけたものから、あなたがsvgからコンテンツのサブセットを変換することはできないので、うまくいきません。 < g>タグは有望だったが運がなかった。

2）私の2番目のアイデアは、コンテンツが読み込まれるとJavaScriptを使用してマスクを調整することでした。同様に、これは動作していません。

すべてのコードは、コード・ペン上にあり、ここにもコピーされた：https://codepen.io/anon/pen/MmdWXB

HTML：

<div class="mask_group" id="mask_container"> 
<div class="text"> 
    <svg> 
    <defs> 
    <mask id="mask" x="0" y="0" width="100%" height="100%" > 
     <rect class="cutout label" x="0" y="0" width="100%" height="100%"/> 
     <text class="label normal_font_weight" y="1em" dy="0em" x="50%">A</text> 
     <text class="label normal_font_weight" y="3em" dy="0em" x="50%">B</text> 
     <line class="label" x1="47%" y1="4.6em" x2="53%" y2="4.6em" style="stroke:rgb(255,0,0);stroke-width:1.5" /> 
     <text class="label" y="7em" dy="0em" x="50%">C</text> 
     <text class="label" y="9em" id="final_text" dy="0em" x="50%">D</text> 
     </mask> 
    </defs> 
    <rect id="base" x="0" y="0" width="100%" height="100%"/> 
    </svg> 
</div> 
</div> 

<div style="background-color:blue; width: 100%; height: 100%"> 
</div> 

CSS：

html,body { 
height: 100%; 
} 

.text { 
    position: relative; 
    /*top: 0; 
    left: 0;*/ 
    width: 100%; 
    height: 100%; 
    margin-left: 0%; 
    /*z-index: 11; */ 
} 

.mask_group { 
    position: fixed; 
    width: 100%; 
    height: 100%; 
    z-index: 10; 

} 

svg { 
    position: absolute; 
    width: 100%; 
    height: inherit; 
} 
svg text { 
    text-anchor: middle; 
} 
.cutout { 
    fill: white; 
} 

svg #base { 
    fill: #051E2A; /*#1F5773;*/ 
    -webkit-mask: url(#mask); 
      mask: url(#mask); 
} 


/*Unused*/ 
.vert_center { 
    position: relative; 
    margin-top: 50%; 
    transform: translateY(-50%); 

} 

JS：

function body_loaded() { 

    var final_text = document.getElementById("final_text"); 
    var position = final_text.getBoundingClientRect(); 
    var bottom = position.bottom; 

    var mask_container = document.getElementById("mask_container"); 
    var mask_position = mask_container.getBoundingClientRect(); 
    var mask_height = mask_position.height; 

    var origin_y = (mask_height - bottom)/2; 
    alert(origin_y); 

    var mask = document.getElementById("mask"); 
    mask.style.y = origin_y; 
} 

ありがとうございます！

Answer 1

あなたは<mask>で何をしようとしているのかよくわからないので、今は無視します。

SVGを垂直方向にセンタリングするには、固定高さを与え、標準translate(-50%)トリックを使用します。唯一の悩みは、transformがCSSのSVGとは異なる動作をするため、CSS transformを<svg>要素に配置できないことです。 SVGは変換前のCSS変換を変換します。ですから、HTMLコンテナにSVGをラップし、その代わりにtransformを適用するだけです。

<svg>の高さを10emに設定しました。明らかに、テキストが多い場合は調整する必要があります。あなたは

svgElem.setAttribute("height", "10em"); 

を使用してJSでそれを行う。しかし、明らかに最初のCSSからそれを取ることができる:)

html,body { 
 
height: 100%; 
 
} 
 

 
.svg-wrapper { 
 
    position: absolute; 
 
    width: 100%; 
 
    top: 50%; 
 
    transform: translate(0, -50%); 
 
} 
 

 
.mask_group { 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 10; 
 
} 
 

 
svg { 
 
    width: 100%; 
 
    height: 10em; 
 
    fill: blue; /* default fill colour for contents */ 
 
} 
 
svg text { 
 
    text-anchor: middle; 
 
} 
 

 
svg #base { 
 
    fill: #051E2A; /*#1F5773;*/ 
 
}

<div class="mask_group" id="mask_container"> 
 
    <div class="svg-wrapper"> 
 
    <svg> 
 
     <rect id="base" x="0" y="0" width="100%" height="100%"/> 
 
     <text class="label normal_font_weight" y="1em" dy="0em" x="50%">A</text> 
 
     <text class="label normal_font_weight" y="3em" dy="0em" x="50%">B</text> 
 
     <line class="label" x1="47%" y1="4.6em" x2="53%" y2="4.6em" style="stroke:rgb(255,0,0);stroke-width:1.5" /> 
 
     <text class="label" y="7em" dy="0em" x="50%">C</text> 
 
     <text class="label" y="9em" id="final_text" dy="0em" x="50%">D</text> 
 
    </svg> 
 
    </div> 
 
</div> 
 

 
<div style="background-color:blue; width: 100%; height: 100%"> 
 
</div>