Как я могу масштабировать текст SVG горизонтальный центр?

Question

У меня есть html код:

section {
  height: 100vh;
}

video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

svg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: min(18vw, 200px);
  font-weight: bold;
  text-transform: uppercase;
}

svg rect {
  fill: white;
  mask: url(#videomask);
}

svg > rect {
  fill: black;
}

<section>
    <video autoplay playsinline muted loop preload>
       <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4"> 
    </video>
    <svg height="100%" width="100%" preserveAspectRatio="xMinYMin">
        <defs>
            <mask id="videomask" x="0" y="0" height="100%" width="100%">
                <rect x="0" y="0" height="100%" width="100%"/>
                <text x="50%" y="50%" fill="red" text-anchor="middle" dominant-baseline="middle">svg mask</text>
            </mask>
        </defs>
        <rect x="0" y="0" height="100%" width="100%"/>
    </svg>
</section>

Моя цель - увеличить текст SVG до такой степени, чтобы вы видели только видео в конце (эффект увеличения). Я уже пытался увеличить font-size, но при масштабировании текст больше не центрируется по горизонтали, что выглядит не очень хорошо.

Какой лучший способ сделать это?

Answer 1

Я сделал несколько изменений в вашем коде, и это может быть не то, что вы хотите. Для svg я использую viewBox = "-320 -180 640 360", где отношение рапорта к ширине и высоте совпадает с отношением рапорта для видео.

Также в вашем коде вы маскируете все части элемента svg. Я маскирую только последний.

Я масштабирую этот последний прямоугольник, используя анимацию SMIL. Вы можете использовать CSS здесь.

Надеюсь, это поможет.

*{margin:0;padding:0;}

video {
  width: 100%;
}

svg {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;

  width:100%;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: bold;
  text-transform: uppercase;
}

svg rect {
  fill: white;
}

svg > rect {
  fill: black;
}

<video autoplay playsinline muted loop preload>
       <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4"> 
    </video> 
<svg viewBox = "-320 -180 640 360">
        <defs>
            <mask id="videomask">

                <rect x="-320" y="-180" height="100%" width="100%"/>
                <text id="elText" fill="red" text-anchor="middle" dominant-baseline="middle" font-size="100" >svg mask</text> 
            </mask>
        </defs>
  <rect x="-320" y="-180" height="100%" width="100%" mask="url(#videomask)">
     <animateTransform  
        attributeName="transform" 
        type="scale"
        values="1,1;500,500" 
        attributeType="XML"
        dur="25s"
        begin="3s"          
        fill="freeze"
        repeatCount="1"/>
  </rect>
</svg>