内联SVG元素具有完美定位的覆盖和文本顶部

我有一些内联SVG代码，显示一些圆形图标，每个都有自己的CSS样式（使用填充和笔划），SVG中的每个图标都代表用户的进度，这个进程有5个阶段（这是一个使用Angular构建的应用程序）。内联SVG元素具有完美定位的覆盖和文本顶部

当用户处于5种可能状态中的任何一种状态时，SVG中相同的相应图标将具有带有一些不透明度的圆形轮廓，基本上是覆盖图。因此，例如，如果用户处于第3阶段，则第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>

来源

2017-02-22 Edgar Quintero

帮助我们来帮助你。请发布[MCVE]。 –

@PaulLeBeau谢谢Paul，完成了。请注意，这只是一个图标，但其余的完全相同（总共有5个），它们都是一个大的

我的意思是一个完整的例子，角度和你的自定义塔格等尽管尽可能最小。 –

它实际上是非常简单的解决，而不是什么大不了的事（叹气）。

我所做的是给SVG元素一个固定的宽度，并保持使用foreignObject相同的方法。我将CSS类应用于具有绝对定位和所有位置正确的foreignObject中的DIV。

唯一的问题是，我必须重新定位屏幕尺寸的值，该值低于我设置的固定宽度。

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

来源

2017-02-23 16:38:53

内联SVG元素具有完美定位的覆盖和文本顶部

回答

相关问题