垂直居中svg內容的一部分

我一直試圖集中svg路徑/文本垂直CSS/JS中的一段時間沒有運氣。我在這裏找到的解決方案都沒有工作到目前爲止。我有多個< text>，< circle>，< rect>，儘管我不認爲內容的類型真的很重要。垂直居中svg內容的一部分

高度是可變的，所以我想到了2種方法： 1）通過50％進行轉換。這是行不通的，因爲你無法從svg中轉換內容的子集，從我迄今發現的內容。 g>標籤很有希望，但我沒有運氣。

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; 
}

提前致謝！

來源

2017-05-27 Ryan

SVG變換是不是CSS變換。它只需要參考由「視口」建立的「用戶空間」座標系統的無量綱數字。閱讀[這裏]（https://www.w3.org/TR/SVG11/coords.html）。 – ccprog

您的SVG無效.XML''沒有結束標記。 –

SVG沒有像HTML那樣的自動佈局。如果你想讓你的文本對象在矩形的中心，你必須給它們適當的座標（'x'和'y'）。 –

我不確定你想用<mask>做什麼，所以我暫時忽略它。

要垂直居中SVG，只需給它一個固定的高度並使用標準的translate(-50%)技巧。唯一的缺點是你不能將CSS transform放在<svg>元素上，因爲transform在SVG中的行爲與它在CSS中的不同。 SVG轉換了日期前的CSS轉換。所以你只需要將SVG封裝在一個HTML容器中，然後將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>

來源

2017-05-28 15:38:02

垂直居中svg內容的一部分

回答

相關問題