title: How can I center my clip-path's text relatively to the viewport and display all the clip-path's text?
body: <p>Here my React component demo: <a href="https://codesandbox.io/s/epic-brown-osiq1" rel="nofollow noreferrer">https://codesandbox.io/s/epic-brown-osiq1</a>, I am now using the <code>viewBox</code>'s values, <code>getBBox</code> and <code>getBoundingClientRect()</code> 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 <code>getBoundingClientRect()</code>'s logs. You can see it on the element I have implemented the <code>getBoundingClientRect()</code> on, namely the <code>&lt;svg&gt;</code>'s root element and the <code>clip-path</code>'s <code>text</code>'s element. Better but the <code>text</code> is more place tower the center of the screen that really aligned on center of the <code>text</code>'s box-you can see the "So"'s word is at the start of the "Food"'s word instead of being aligned on the <code>box</code>'s center. So I am at this point currently. Thanks for the feedback.*</p>
  
  <p><em>note: You will see some comments providing information or parts of my former trials inside the sandbox.
  <strong>What my code does</strong> ? concretely I display a <code>clip-path</code>'s text with some animated panel travelling the <code>clip-path</code> - this is the <code>color_panel_group's element</code>- giving some dynamic to the composition.There is also a shadow behind the <code>text</code> to give some depth to the composition.</em></p>
  
  <ul>
  <li><strong>Expectation:</strong> display a <code>clip-path</code>'s <code>text</code> responsively positioned at the <strong><em>vertical and horizontal's</em></strong> centers of the viewport. </li>
  <li><strong>Problem:</strong> My <code>clip-path</code> hides a part of the <code>text</code> and my trials to center the element relative to viewport fails to be fructuous. </li>
  <li><strong>What I have tried:</strong> I have tried to play with the width of the element and the <code>x</code>'s positions of the element -mainly <code>text</code>, <code>clip-path</code>, <code>symbol</code> and both case. Even tried to play with the <code>use</code> element by implementing some class in it, but at the end of the day very approximative result outcomed. Also In <code>tspan</code> and <code>symbol</code> I have tried to play with <code>x</code>'s attribute, again with very approximative outcomes. I have tried to play with <code>position absolute</code> and a <code>relative container</code> -mainly on the <code>SVG</code>'s CSS selector directly-, still with approximative outcomes.</li>
  </ul>
  
  <p>I am wondering what I am missing. Maybe someone can bring some explanation on my code's behavior?</p>
  
  <p>Here my second presentation's resulting code (approximately what React component produces):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="component"&gt;
    &lt;svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 965 657"&gt;
      &lt;defs&gt;
        &lt;symbol id="panel_animation" y="0"&gt;
          &lt;clipPath class="clipPath_text" id="clipPath_text"&gt;&lt;text class="brandtype" word-spacing="-.45em"&gt;
              &lt;tspan x="0%" y="50%" dy="1.6em"&gt;So&lt;/tspan&gt;
              &lt;tspan x="0%" y="50%" dy="3em"&gt;Food&lt;/tspan&gt;
            &lt;/text&gt;&lt;/clipPath&gt;
          &lt;g class="shadow" clip-path="url(#clipPath_text)"&gt;
            &lt;rect class="shape_animation shape_animation_shadow" width="100%" height="100%" x="-25px"&gt;
            &lt;/rect&gt;
          &lt;/g&gt;
          &lt;g class="color_panel_group" clip-path="url(#clipPath_text)"&gt;
            &lt;rect class="shape_animation" fill="#F2385A" width="100%" height="100%"&gt;&lt;/rect&gt;
            &lt;rect class="shape_animation" fill="#F5A503" width="80%" height="100%"&gt;&lt;/rect&gt;
            &lt;rect class="shape_animation" fill="#E9F1DF" width="60%" height="100%"&gt;&lt;/rect&gt;
            &lt;rect class="shape_animation" fill="#56D9CD" width="40%" height="100%"&gt;&lt;/rect&gt;
            &lt;rect id="shape_animation_ref" class="shape_animation" fill="#3AA1BF" width="20%" height="100%" x="-25px"&gt;
            &lt;/rect&gt;
          &lt;/g&gt;
        &lt;/symbol&gt;
      &lt;/defs&gt;
      &lt;rect width="100%" height="100%" filter="url(#background_light)"&gt;&lt;/rect&gt;
      &lt;use width="500px" height="100%" x="50%" xlink:href="#panel_animation" class="brandtype_use"&gt;&lt;/use&gt;
    &lt;/svg&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks for any hint.</p>