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>

我想将#cliptop用作CSS中的剪切路径，所以尝试了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>

Answer 2

我已经弄清楚了，就像enxaneta回答的一样，这是它的外观

<svg height="200" width="100%"viewBox="0 0 100 200" 
preserveAspectRatio="none"> 
<defs>
<filter id="dropshadow" height="100%">
  <feGaussianBlur in="SourceAlpha" stdDeviation="1"/> 
  <feOffset dx="2" dy="2" result="offsetblur"/>
  <feComponentTransfer>
    <feFuncA type="linear" slope="0.8"/>
  </feComponentTransfer>
  <feMerge> 
    <feMergeNode/>
    <feMergeNode in="SourceGraphic"/> 
  </feMerge>
</filter>
</defs>
<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:3;"vector-effect="non- 
scaling-stroke" 
/>      
</svg> 
<h1 class="clipped">70.4%</h1>
<h1 class="clipped2">70.4%</h1>
</div> 
<svg height="0" width="0">
<defs>
     <clipPath id="clip" clipPathUnits="objectBoundingBox">
       <polyline points="
        .083,.2
          .166,.25
          .249,.45
          .332,.35
          .415,.4
          .498,.3
          .581,.1
          .664,.35
          .744,.3
          .83,.2
          .913,.25
          .996,.4
          .996,2.00
          0,2.00
          0,0                 
                " />
    </clipPath>
     <clipPath id="clip2" clipPathUnits="objectBoundingBox">
       <polyline points="
        .083,.2
          .166,.25
          .249,.45
          .332,.35
          .415,.4
          .498,.3
          .581,.1
          .664,.35
          .744,.3
          .83,.2
          .913,.25
          .996,.4
          .996,0
          0,0
                " />
    </clipPath>
  </defs>
</svg>

和样式

<style>
.framer .clipped,.framer .clipped2{
position: absolute;
top: 0;
margin: 0 auto;
width: 100%;
height: 200px;
line-height: 120px;
font-size: 120px;
letter-spacing: -5px;
text-align: center;
 z-index: -2;
 }
.framer .clipped{
 color: transparent;
 text-shadow: 0 0 8px rgba(130,100,100,0.5);
 -webkit-clip-path: url(#clip);
 clip-path: url(#clip);filter:
 }
.framer .clipped2{
-webkit-clip-path: url(#clip2);
  clip-path: url(#clip2);
color: #300;
  }
</style>

使用折线剪辑文本

2 个答案: