title: Inline SVG Element with Perfectly Positioned Overlay and Text On top
body: <p>I have some inline SVG code that shows some circular icons, each with their own CSS styling (using fills and strokes), each icon in the SVG represents the progress of a user, there are 5 stages to this progress (it's an app built with Angular).</p>
  
  <p>When the user is in any of the 5 possible states, the same corresponding icon in the SVG will have a circular outline with some opacity, basically an overlay. So if the user is in stage 3, for example, the stage 3 icon will have this circular overlay applied and also add some text on top of it (the stage name).</p>
  
  <p><strong>I am having issues with the positioning of this circular overlay and the text of this active stage. I have tried adding this styling and text with the <code>&lt;foreignObject&gt;</code>tag, but when the browser is resized it falls out of proportion.</strong></p>
  
  <p>I apply the active stage class that does the above by passing in a current stage value to the Angular Directive ng-class, like so:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;customtag ng-class="{
    'stage-one-active': stage_value === 1,
    'stage-two-active': stage_value === 2,
    'stage-three-active': stage_value === 3,
    'stage-four-active': stage_value === 4,
    'stage-five-active': stage_value === 5
    }"&gt;
  &lt;/customtag&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The <code>customtag</code> contains the inline SVG. Whenever a user is in any of the stages, that class will be applied, and the troublesome circular overlay with text it will be applied. </p>
  
  <p><strong><em>I am looking for ideas as to what would be a good way to add this overlay and text on top of a portion of an SVG inline image and that stays in place no matter the screen size.</em></strong></p>
  
  <p>As always any valuable input is greatly appreciated it. Thanks.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg version="1.1" 
      xmlns="http://www.w3.org/2000/svg" 
      xmlns:xlink="http://www.w3.org/1999/xlink" 
      xml:space="preserve" 
      viewBox="0 0 1120 940"&gt;
  
      &lt;!-- One Icon Example, there are 4 more like this one --&gt;
      &lt;g class="program-modeling-stage"&gt;
          &lt;!-- This is my attempt, the overlay and text do not position correctly --&gt;
          &lt;foreignObject width="200" height="200" requiredExtensions="http://www.w3.org/1999/xhtml"&gt;
  
              &lt;div class="active-stage-overlay"&gt;&lt;!-- This would be the circular overlay that sits on top of entire icon image --&gt;
                  &lt;div class="active-stage-text"&gt;Current Stage&lt;/div&gt;&lt;!-- This would be the text --&gt;
              &lt;/div&gt;
          &lt;/foreignObject&gt;
         &lt;!-- END attempt... --&gt;
          &lt;text class="stage-label" x="45" y="290"&gt;Business&lt;/text&gt;
          &lt;text class="stage-label" x="40" y="320"&gt;Development&lt;/text&gt;
  
          &lt;circle class="stage-diagram" cx="92" cy="432" r="87.5" /&gt;
          &lt;g&gt;
              &lt;path class="stage-diagram-growth-background" d="M89.4,365,60.82,414.5h62.35L94.6,365A3,3,0,0,0,89.4,365Z" transform="translate(0 -1)" /&gt;
              &lt;path class="stage-diagram-program-background" d="M60.82,414.5,32.24,464a3,3,0,0,0,2.6,4.5H149.16a3,3,0,0,0,2.6-4.5l-28.58-49.5Z" transform="translate(0 -1)" /&gt;
          &lt;/g&gt;
          &lt;path class="stage-diagram-growth-line" d="M92.9,409h18.05a1,1,0,0,0,.82-1.42l-8.21-14.21" transform="translate(0 -1)" /&gt;
          &lt;line class="stage-diagram-program-line" x1="42.86" y1="460.48" x2="82.86" y2="460.48" /&gt;
          &lt;g&gt;
              &lt;path class="stage-diagram-collective-on" d="M182.5,425.83A90.8,90.8,0,0,0,99.17,342.5" transform="translate(0 -1)" /&gt;
              &lt;path class="stage-diagram-collective-on" d="M99.17,523.5a90.57,90.57,0,0,0,83.33-83.09" transform="translate(0 -1)" /&gt;
              &lt;path class="stage-diagram-collective-on" d="M1.5,440.17A90.57,90.57,0,0,0,84.59,523.5" transform="translate(0 -1)" /&gt;
              &lt;path class="stage-diagram-collective-on" d="M84.59,342.74A90.34,90.34,0,0,0,1.5,425.83" transform="translate(0 -1)" /&gt;
          &lt;/g&gt;
          
      &lt;/g&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/FdfPD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FdfPD.png" alt="enter image description here"></a></p>