Here my React component demo: https://codesandbox.io/s/epic-brown-osiq1, I am now using the viewBox 's values, getBBox and getBoundingClientRect() to realize some calculations in order to position my element. Currently I have entered raw value based on the return the console have provided me from the getBoundingClientRect() 's logs. You can see it on the element I have implemented the getBoundingClientRect() on, namely the <svg> 's root element and the clip-path 's text 's element. Better but the text is more place tower the center of the screen that really aligned on center of the text 's box-you can see the "So"'s word is at the start of the "Food"'s word instead of being aligned on the box 's center. So I am at this point currently. Thanks for the feedback.*

note: You will see some comments providing information or parts of my former trials inside the sandbox. What my code does ? concretely I display a clip-path 's text with some animated panel travelling the clip-path - this is the color_panel_group's element - giving some dynamic to the composition.There is also a shadow behind the text to give some depth to the composition.

Expectation: display a clip-path 's text responsively positioned at the vertical and horizontal's centers of the viewport.

display a 's responsively positioned at the centers of the viewport. Problem: My clip-path hides a part of the text and my trials to center the element relative to viewport fails to be fructuous.

My hides a part of the and my trials to center the element relative to viewport fails to be fructuous. What I have tried: I have tried to play with the width of the element and the x 's positions of the element -mainly text , clip-path , symbol and both case. Even tried to play with the use element by implementing some class in it, but at the end of the day very approximative result outcomed. Also In tspan and symbol I have tried to play with x 's attribute, again with very approximative outcomes. I have tried to play with position absolute and a relative container -mainly on the SVG 's CSS selector directly-, still with approximative outcomes.

I am wondering what I am missing. Maybe someone can bring some explanation on my code's behavior?

Here my second presentation's resulting code (approximately what React component produces):

body { background: orange; } svg { background: green; display: block; margin: auto; position: relative; z-index: 2; top: 0; left: 0; width: 100vw; height: 100vh; } .component { min-width: 100vw; min-height: 100vh; font-size: 100%; } .fade_in_background { opacity: 1; visibility: visible; transition: all 1.5s ease-out 0s; } .brandtype { margin: auto; text-align: center; } .brandtype_use { position: absolute; transform: translate(-112.65px, 0) } .clipPath_text { text-align: center; } .color_panel_group { padding: 25px; } .shape_animation { transform-origin: 0; transform: scale(0, 1) translate(0, 0); animation: moving-panel 3s 1.5s 1 alternate forwards; } .shadow { transform: translate(10px, 10px) } .shape_animation_shadow { fill: black; fill-opacity: .505; transition: all 1.3s ease-out 0.3s; } .brandtype { font-size: 6.8em; } @keyframes moving-panel { to { transform: scale(1, 1) translate(20px, 0); } } <div class="component"> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 965 657"> <defs> <symbol id="panel_animation" y="0"> <clipPath class="clipPath_text" id="clipPath_text"><text class="brandtype" word-spacing="-.45em"> <tspan x="0%" y="50%" dy="1.6em">So</tspan> <tspan x="0%" y="50%" dy="3em">Food</tspan> </text></clipPath> <g class="shadow" clip-path="url(#clipPath_text)"> <rect class="shape_animation shape_animation_shadow" width="100%" height="100%" x="-25px"> </rect> </g> <g class="color_panel_group" clip-path="url(#clipPath_text)"> <rect class="shape_animation" fill="#F2385A" width="100%" height="100%"></rect> <rect class="shape_animation" fill="#F5A503" width="80%" height="100%"></rect> <rect class="shape_animation" fill="#E9F1DF" width="60%" height="100%"></rect> <rect class="shape_animation" fill="#56D9CD" width="40%" height="100%"></rect> <rect id="shape_animation_ref" class="shape_animation" fill="#3AA1BF" width="20%" height="100%" x="-25px"> </rect> </g> </symbol> </defs> <rect width="100%" height="100%" filter="url(#background_light)"></rect> <use width="500px" height="100%" x="50%" xlink:href="#panel_animation" class="brandtype_use"></use> </svg> </div>

Thanks for any hint.