Question

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

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

我对此圆形叠加层的定位和此活动阶段的文本存在问题。我尝试使用<foreignObject>标记添加此样式和文字，但是当浏览器调整大小时，它不成比例。

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

＆＃13;

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

＆＃13;

customtag包含内联SVG。每当用户处于任何阶段时，将应用该类，并且将应用具有文本的麻烦的圆形覆盖。

我正在寻找关于在SVG内嵌图像的一部分上添加此叠加层和文本的好方法的想法，无论屏幕大小如何，它都会保留在原位。< / EM>

一如既往，我们非常感谢任何有价值的投入。感谢。

＆＃13;
＆＃13;
<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">  <g class="program-modeling-stage">  <foreignObject width="200" height="200" requiredExtensions="http://www.w3.org/1999/xhtml"> <div class="active-stage-overlay"> <div class="active-stage-text">Current Stage</div> </div> </foreignObject>  <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>
＆＃13;
＆＃13;
＆＃13;

Answer 1

实际上解决起来真的很简单，而不是那么大的交易（叹息）。

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

内嵌SVG元素，具有完美定位的叠加和文本在上面

1 个答案: