Встроенный элемент SVG с идеально расположенным наложением и текстом В начало

Question

У меня есть встроенный SVG-код, который показывает некоторые круговые значки, каждый со своим стилем CSS (с использованием заливок и штрихов), каждый значок в SVG представляет прогресс пользователя , есть 5 этапов этого прогресса (это приложение построено с Угловым).

Когда пользователь находится в любом из 5 возможных состояний, тот же самый значок в SVG будет иметь круговой контур с некоторой непрозрачностью, в основном оверлей. Так, если пользователь находится на третьем этапе, например, значок этапа 3 будет применять этот круговой оверлей, а также добавить над ним текст (название сцены).

У меня возникли проблемы с позиционированием этого кругового наложения и текста этой активной сцены. Я попытался добавить этот стиль и текст с тегом <foreignObject>, но при изменении размера браузера он падает пропорционально.

я применить активный класс этапа, который делает выше, передавая значение тока ступени к Угловой директиве нг-классу, например, так:

<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>

customtag содержит встроенный SVG. Всякий раз, когда пользователь находится на любой стадии, этот класс будет применен, и сложный круговой оверлей с текстом будет применен.

Я ищу идеи относительно того, что было бы хорошим способом добавить этот оверлей и текст поверх части встроенного изображения SVG и оставаться на месте независимо от размера экрана.

Как всегда, любой ценный вход очень ценится. Благодарю.

<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"> 
 

 
    <!-- One Icon Example, there are 4 more like this one --> 
 
    <g class="program-modeling-stage"> 
 
     <!-- This is my attempt, the overlay and text do not position correctly --> 
 
     <foreignObject width="200" height="200" requiredExtensions="http://www.w3.org/1999/xhtml"> 
 

 
      <div class="active-stage-overlay"><!-- This would be the circular overlay that sits on top of entire icon image --> 
 
       <div class="active-stage-text">Current Stage</div><!-- This would be the text --> 
 
      </div> 
 
     </foreignObject> 
 
     <!-- END attempt... --> 
 
     <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>

Answer 1

Это было на самом деле очень просто решить и не так уж много (Вздох).

То, что я делал, придавал элементу SVG фиксированную ширину и поддерживал тот же подход использования foreignObject. Я применил классы CSS к DIV внутри объекта foreignObject, которые имеют абсолютное позиционирование и все позиции правильно.

Единственная проблема заключается в том, что мне необходимо изменить значения размеров экрана, которые упали ниже фиксированной ширины, установленной мною.

#progression-diagram { 
 
    svg { 
 
    width: 600px; 
 
    } 
 
    
 
    .active-stage-overlay { 
 
    position: absolute; 
 
    width: 110px; 
 
    height: 110px; 
 
    background-color: transparentize($primary-color, 1); 
 
    transition: background-color 700ms ease-in-out; 
 
    border-radius: 50%; 
 
    } 
 

 
    .active-stage-label { 
 
    fill: $primary-color; 
 
    font-weight: 700; 
 
    } 
 
    
 
}

<foreignObject x="279" y="566" width="200" height="200"> 
 
    <div class="active-stage-overlay"> 
 
    <div class="active-stage-label">Current Stage</div> 
 
    </div> 
 
</foreignObject>