剪辑路径边框颜色

Question

您好，我已经成功剪裁了一个 svg 形状的路径，并使用我在网上找到的文档进行了缩放。

但是我正在尝试向剪辑路径添加边框并且没有运气。我不想覆盖这个剪辑并添加填充，因为我想要透明度。

这是我一直在使用的代码，我尝试重新创建的效果附在图像中。

提前致谢！

<svg 
    height="0" 
  width="0"
    viewBox="0 0 198.6 51.6"
  xmlns="http://www.w3.org/2000/svg" 
  xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="Assets" fill="none">
            <defs>
            <clipPath id="myClip" clipPathUnits="objectBoundingBox" transform="scale(0.00503524672
, 0.01937984496)">
        <path class="st0" d="M176.9,51.1H7.7c-4,0-7.2-3.2-7.2-7.2V7.7c0-4,3.2-7.2,7.2-7.2h183.1c4,0,7.2,3.2,7.2,7.2v22.2
    c0,1.9-0.8,3.8-2.1,5.1L182,49C180.7,50.4,178.8,51.1,176.9,51.1z"></path>
        </clipPath>
        </defs>
    </g>
</svg>

<style>
    .btn_b {
    -webkit-clip-path: url(#myClip);
    clip-path: url(#myClip);
    }
</style>

example of button

Answer 1

虽然您不能在剪辑路径之后放置边框，但您可以在伪元素上使用背景图像获得相同的效果。

这是一个简单的例子，黑色部分只是一个较小的 after 伪元素，但与 before 伪元素提供的背景相同。

.btn_b {
  -webkit-clip-path: url(#myClip);
  clip-path: url(#myClip);
  width: 40vmin;
  height: 20vmin;
  background-color: transparent;
  position: relative;
  border: none;
}

button::before,
button::after {
  content: '';
  position: absolute;
  z-index: -1;
}

button::before {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right, cyan, magenta);
}

button::after {
  top: 1vmin;
  left: 1vmin;
  width: calc(100% - 2vmin);
  height: calc(100% - 2vmin);
  background-color: black;
  -webkit-clip-path: url(#myClip);
  clip-path: url(#myClip);
}

<button class="btn_b"></button>
<svg height="0" width="0" viewBox="0 0 198.6 51.6" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="Assets" fill="none">
            <defs>
            <clipPath id="myClip" clipPathUnits="objectBoundingBox" transform="scale(0.00503524672
, 0.01937984496)">
        <path class="st0" d="M176.9,51.1H7.7c-4,0-7.2-3.2-7.2-7.2V7.7c0-4,3.2-7.2,7.2-7.2h183.1c4,0,7.2,3.2,7.2,7.2v22.2
    c0,1.9-0.8,3.8-2.1,5.1L182,49C180.7,50.4,178.8,51.1,176.9,51.1z"></path>
        </clipPath>
        </defs>
    </g>
</svg>