CSS - 通过下方SVG 徽标图像添加细水平线

问题描述

如何实现这样的水平线穿过（在它下面用情人 z-index 所以它实际上通过图像不可见）SVG 标志图像但这样它就不会接触侧面的图像，正如我们在这里看到的那样，有图像每一侧的线条和图像之间的间隙。已尝试将图像容器设置为相对容器并在其上添加 ::before 伪类，将此细线设置为：

    &:before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            border-top: 1px solid $whiteColor;
            width: 100%;
            transform: translateY(-50%);
        }

但它穿过 SVG 标志并通过它可见。我想实现这一目标：

解决方法

尝试使用 &:before 和 &:after 伪类来实现这一点。 例如，您可以使用：

&:before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        border-top: 1px solid $whiteColor;
        width: 40%;
        transform: translateY(-50%);
    }



&:after {
            content: '';
            position: absolute;
            top: 50%;
            right: 0;
            border-top: 1px solid $whiteColor;
            width: 40%;
            transform: translateY(-50%);
        }

不确定这是否可行，只是复制了您的示例并想向您展示逻辑:)

,

这是一个帮助链接 - https://codepen.io/liam88/pen/bGgKzBq

在这里，我创建了一个简单的块，它是您的环绕声。然后在里面有一个盒子，盒子里面有一个 SVG。

内容使用 display flex 在中心对齐高度和深度。

然后使用“before”和“after”在svg的两侧创建两条线。这样您就不必担心试图制造间隙等。

这两行在框内，框是父级（相对）。

<dv class="block">
<div class="bar">
    <a href="https://liamhooper.co.uk/" title="liamhooper.co.uk" target="_blank">
    <svg xmlns="http://www.w3.org/2000/svg" width="40px" height="40px" viewBox="0 0 1000 1000">
      <rect width="250" height="1000"></rect>
      <rect id="Rectangle_1_copy" data-name="Rectangle 1 copy" x="750" width="250" height="1000"></rect>
      <rect x="500" y="250" width="500" height="250"></rect>
      <rect id="Rectangle_2_copy" data-name="Rectangle 2 copy" y="750" width="500" height="250"></rect>
    </svg>
    </a>
  </div>
  </div>

 .block{
  width:100%;
  height:50px;
  background:#EA5E5D;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  padding:10px 0;
}
.block .bar::before{
  position:absolute;
  content:'';
  z-index:-1px;
  height:2px;
  width:45%;
  left:10px;
  top:50%;
  background:white;
}
.block .bar::after{
  position:absolute;
  content:'';
  z-index:-1px;
  height:2px;
  width:45%;
  right:10px;
  top:50%;
  background:white;
}
.block .bar svg{
  fill:white;
  z-index:2;
}