Vertikal zentriert Teil von Svg Inhalt

Question

Ich habe versucht, eine Sammlung von Svg Pfade/Text vertikal in CSS/JS für eine ganze Weile ohne Glück zu zentrieren. Keine der Lösungen, die ich hier gefunden habe, hat bisher funktioniert. Ich habe mehrere < Text>, < Kreis>, < Rect>, obwohl ich glaube nicht, die Art des Inhalts wirklich wichtig ist. Die Höhe ist variabel, also habe ich an 2 Methoden gedacht: 1) Umwandlung über 50%. Dies funktioniert nicht, weil Sie eine Untermenge von Inhalt nicht von einer SVG, von dem, was ich bisher gefunden habe, transformieren können. Das < g> -Tag war vielversprechend, aber ich hatte kein Glück.

2) Meine zweite Idee war, die Maske per Javascript nach dem Laden des Inhalts anzupassen. Dies funktioniert ebenfalls nicht.

Der gesamte Code ist auf Code-Stift und auch hier kopiert: 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; 
} 

Vielen Dank im Voraus!

Answer 1

Ich bin mir nicht sicher, was Sie mit dem <mask> zu tun versuchen, also werde ich es für jetzt ignorieren.

Um das SVG vertikal zu zentrieren, geben Sie ihm eine feste Höhe und verwenden Sie den Standard translate(-50%) Trick. Die einzige Falte ist, dass Sie das CSS transform nicht auf das Element <svg> setzen können, weil transform ein anderes Verhalten in SVGs hat als in CSS. SVG transformiert CSS-Transformationen vor dem Datum. Sie müssen also nur das SVG in einen HTML-Container einbinden und stattdessen das transform darauf anwenden.

Ich habe die Höhe des <svg> auf 10em festgelegt. Natürlich müssen Sie das anpassen, wenn Sie mehr Text haben. Man könnte das mit JS tun

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

verwenden, aber nehmen Sie es zunächst offensichtlich von der CSS-out :)

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>