Within my inline SVG code, there are circular icons representing different user progress stages, each customized with CSS styling. The SVG contains 5 stages of progress in total and is utilized within an Angular app.
For any active stage, a corresponding circular overlay with some opacity is applied to the respective icon in the SVG along with additional text indicating the stage name. This creates a dynamic effect based on the user's current stage (e.g., stage 3).
The challenge lies in positioning this circular overlay and text accurately regardless of browser resizing. Attempts using <foreignObject> caused proportional issues.
To apply the active stage styles, I pass the current stage value to ng-class in the Angular Directive:
<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
}">
</customtag>The customtag embeds the inline SVG, triggering the circular overlay and accompanying text for the active stage.
I seek suggestions on effectively layering an overlay and text atop portions of an inline SVG image that retains its position across various screen sizes.
Your valuable input is always appreciated. Thank you.
<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">
<!-- Single Icon Example, with multiples like this -->
<g class="program-modeling-stage">
<!-- Overlay and text attempt causing mispositioning -->
<foreignObject width="200" height="200" requiredExtensions="http://www.w3.org/1999/xhtml">
<div class="active-stage-overlay"><!-- Circular overlay over entire icon image -->
<div class="active-stage-text">Current Stage</div><!-- The associated text -->
</div>
</foreignObject>
<!-- End of issue... -->
<text class="stage-label" x="45" y="290">Business</text>
<text class="stage-label" x="40" y="320">Development</text>
<circle class="stage-diagram" cx="92" cy="432" r="87.5" />
<g>
<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)" />
<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)" />
</g>
<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)" />
<line class="stage-diagram-program-line" x1="42.86" y1="460.48" x2="82.86" y2="460.48" />
<g>
<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)" />
<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)" />
<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)" />
<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)" />
</g>
</g>
</svg>