我一直试图在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>

10-05 20:29
查看更多