具有完美定位的叠加层和顶部文本的内联 SVG 元素

Posted 2023-03-06

【中文标题】具有完美定位的叠加层和顶部文本的内联 SVG 元素

【英文标题】：Inline SVG Element with Perfectly Positioned Overlay and Text On top

【发布时间】：2017-07-13 05:33:07

【问题描述】：

我有一些显示一些圆形图标的内联 SVG 代码，每个图标都有自己的 CSS 样式（使用填充和笔划），SVG 中的每个图标代表用户的进度，这个进度有 5 个阶段（它是使用 Angular 构建的应用程序）。

当用户处于 5 种可能的状态中的任何一种时，SVG 中相同的对应图标将具有带有一些不透明度的圆形轮廓，基本上是叠加层。因此，例如，如果用户处于第 3 阶段，则第 3 阶段图标将应用此圆形叠加层，并在其顶部添加一些文本（阶段名称）。

我对这个圆形叠加层的定位和这个活动舞台的文字有疑问。我尝试使用<foreignObject>tag 添加此样式和文本，但是当调整浏览器大小时，它会不成比例。

我通过将当前阶段值传递给 Angular 指令 ng 类来应用执行上述操作的活动阶段类，如下所示：

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

【问题讨论】：

帮助我们帮助您。请发帖minimal reproducible example。

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

我的意思是一个完整的例子，包括角度和你的自定义标签等。虽然尽可能少。

你为什么要在 HTML 和 SVG 中定位而不是反过来？

因为一切都是内联 SVG，而且在指令 中，只有一个 SVG 元素，没有别的，所以我的问题呵呵。

【参考方案1】：

其实解决起来真的很简单，没什么大不了的（叹气）。

我所做的是给 SVG 元素一个固定的宽度，并保持使用 foreignObject 的相同方法。我将 CSS 类应用于 foreignObject 内的 DIV，这些 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"  >
  <div class="active-stage-overlay">
    <div class="active-stage-label">Current Stage</div>
  </div>
</foreignObject>