我一直试图在CSS / JS中垂直居中放置svg路径/文本的集合已经有一段时间了,但是没有运气。到目前为止,我在这里没有找到任何解决方案。我有多个,,,尽管我认为内容的类型并不重要。
高度是可变的,所以我想到了2种方法:
1)通过50%转换。这是行不通的,因为到目前为止,您无法从svg转换内容的子集。 标签很有前途,但我没有运气。
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;
}
提前谢谢!
最佳答案
我不确定您要使用<mask>
做什么,所以现在暂时将其忽略。
要使SVG垂直居中,只需将其设置为固定高度,然后使用标准的translate(-50%)
技巧即可。唯一的麻烦是您不能将CSS transform
放在<svg>
元素上,因为transform
在SVG中的行为不同于在CSS中的行为。 SVG转换过早的CSS转换。因此,您只需要将SVG包装在HTML容器中,然后将transform
应用于该容器即可。
我已经将<svg>
的高度设置为10em
。显然,如果您有更多文字,则需要进行调整。您可以使用JS使用
svgElem.setAttribute("height", "10em");
但是显然首先要从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>