css - 使用多段线剪辑文本

Question

我想使用 svg 折线剪辑文本，例如 heading1，想法是将 H1 放在折线背景后面，使其看起来像磨砂或模糊，我以前做过但不知何故忘记了

    <svg height="200" width="100%"viewBox="0 0 100 200" preserveAspectRatio="none"> 
    <polyline id="cliptop" points="
                  8.3,40
                  16.6,50
                  24.9,90
                  33.2,70
                  41.5,80
                  49.8,60
                  58.1,20
                  66.4,70
                  74.4,60
                  83,40
                  91.3,50
                  99.6,80
                  99.6,200
                  8.3,200
      "
     style="fill:rgba(255,255,255,0.75);stroke:none;"
     /> 
     <polyline points="
     8.3,40
                  16.6,50
                  24.9,90
                  33.2,70
                  41.5,80
                  49.8,60
                  58.1,20
                  66.4,70
                  74.4,60
                  83,40
                  91.3,50
                  99.6,80
     "
     style="fill:none;stroke:rgba(30,0,0,0.8);stroke-width:7;"vector- 
     effect="non-scaling-stroke"
     />    
    
     </svg>

我想在 css 中使用 #cliptop 作为剪辑路径，我尝试了 clip-path: url(#cliptop)。谢谢，任何建议将不胜感激

Answer 1

这是一种方法。在这种情况下，点是相对于一个非常小的盒子(1x1 的正方形)和`clipPathUnits="objectBoundingBox"``

h1{
  padding: 0;
  background: silver;
  background-size: cover;
  height: 50vh;
  -webkit-clip-path: url(#clip);
  clip-path: url(#clip);  
}

<svg height="0" width="0" class="svg-clip" style="position:absolute">
    <defs>
         <clipPath id="clip" clipPathUnits="objectBoundingBox">
           <polyline points="
            .083,.4
              .166,.50
              .249,.90
              .332,.70
              .415,.80
              .498,.60
              .581,.20
              .664,.70
              .744,.60
              .83,.40
              .913,.50
              .996,.80
              .996,2.00
              .083,2.00
                    " />
        </clipPath>
    </defs>
</svg>
<h1></h1>