如何为带透明/RGBA背景的Clip-path形状添加渐变边框？

我需要为使用Clip-path的形状添加渐变边框，同时将背景设置为background-color: transparent或RGBA格式。尝试过相关方案但无效，我的代码如下：

CSS代码 #

body {
  min-height: 1000px;
}

.container {
  width: 400px;
  height: 400px;
  background-color: rgba(56, 53, 75, 0.24);
  backdrop-filter: blur(3px);
  border-radius: 0.5rem;
  clip-path: url(#b-clip-path-1);
}

HTML代码 #

<div class="container">
  <svg width="0" height="0" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet">
    <defs>
      <!-- gradient -->
      <linearGradient id="gradient-border" x1="0%" y1="0%" x2="100%" y2="100%">
        <stop offset="0%" stop-color="#00f" />
        <stop offset="100%" stop-color="#f00" />
      </linearGradient>

      <!-- clip path -->
      <clipPath id="b-clip-path-1" clipPathUnits="objectBoundingBox">
        <path d="M1,0 H0.1 C0.095,0 0.085,0.01 0.085,0.025 V0.57 C0.085,0.59 0.083,0.61 0.078,0.625 L0.015,0.72 C0.007,0.735 0.002,0.755 0.002,0.775 V1 C0.002,1 0.01,1 0.02,1 H1 C1,1 1,1 1,1 V0 C1,0 1,0 1,0Z" />
      </clipPath>
    </defs>

    <!-- border -->
    <path d="M0,0 H0.1 C0.095,0 0.085,0.01 0.085,0.025 V0.57 C0.085,0.59 0.083,0.61 0.078,0.625 L0.015,0.72 C0.007,0.735 0.002,0.755 0.002,0.775 V1 C0.002,1 0.01,1 0.02,1 H1 C1,1 1,1 1,1 V0 C1,0 1,0 1,0Z" fill="none" stroke="url(#gradient-border)" stroke-width="0.05" />

    <!-- inner path с clip-path -->
    <path d="M0,0 H0.1 C0.095,0 0.085,0.01 0.085,0.025 V0.57 C0.085,0.59 0.083,0.61 0.078,0.625 L0.015,0.72 C0.007,0.735 0.002,0.755 0.002,0.775 V1 C0.002,1 0.01,1 0.02,1 H1 C1,1 1,1 1,1 V0 C1,0 1,0 1,0Z" fill="#00f" clip-path="url(#b-clip-path-1)" />
  </svg>
</div>

预期效果 #

我已经添加了渐变设置，但并未生效，希望能得到帮助。

内容的提问来源于stack exchange，提问作者Dmitriy