结合两个毛刺效应

Question

我正在尝试将两种效果结合起来，但是当我尝试将它们组合起来时，只有一种效果。我想知道SVG是否覆盖了其他效果，是否有两种方法可以同时工作？

我尝试合并它们：http://codepen.io/Dingerzat/pen/jBgYgB

这是主效应（http://codepen.io/Dingerzat/pen/OpKzGV）：

SCSS

@import "compass/css3";

body{
  background:black;
  font-family: 'Varela', sans-serif;
}

.glitch{
  color:white;
  font-size:100px;
  position:relative;
  width:400px;
  margin:0 auto;
}
@keyframes noise-anim{
  $steps:50;
  @for $i from 0 through $steps{
    #{percentage($i*(1/$steps))}{
      clip:rect(random(100)+px,9999px,random(100)+px,0);
    }
  }
}
.glitch:after{
  content:attr(data-text);
  position:absolute;
  left:5px;
  text-shadow:-1px 0 red;
  top:0;
  color:white;
  background:black;
  overflow:hidden;
  clip:rect(0,900px,0,0); 
  animation:noise-anim 2s infinite linear alternate-reverse;
}

@keyframes noise-anim-2{
  $steps:20;
  @for $i from 0 through $steps{
    #{percentage($i*(1/$steps))}{
      clip:rect(random(100)+px,9999px,random(100)+px,0);
    }
  }
}
.glitch:before{
  content:attr(data-text);
  position:absolute;
  left:-2px;
  text-shadow:1px 0 blue; 
  top:0;
  color:white;
  background:black;
  overflow:hidden;
  clip:rect(0,900px,0,0); 
  animation:noise-anim-2 3s infinite linear alternate-reverse;
}

这是第二个效果（http://codepen.io/lbebber/pen/qEjRYd）：

SCSS

@import "compass/css3";

body{
  background:#222222;
  color:white;
  font-size:120px;
  text-align:center;
}
%effect{
  -webkit-filter: url("#glitch");
  filter:url("#glitch");
}
.text{
  @extend %effect;
  display:inline-block;
}

HTML

<div class="text">Glitch</div>




<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
      <filter id="glitch" x="0" y="0">
          <feColorMatrix in="SourceGraphic" mode="matrix" values="1 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0" result="r" />

        <feOffset in="r" result="r" dx="-5">
          <animate attributeName="dx" attributeType="XML" values="0; -5; 0; -18; -2; -4; 0 ;-3; 0" dur="0.2s" repeatCount="indefinite"/>
        </feOffset>
        <feColorMatrix in="SourceGraphic" mode="matrix" values="0 0 0 0 0  0 1 0 0 0  0 0 0 0 0  0 0 0 1 0" result="g"/>
        <feOffset in="g" result="g" dx="-5" dy="1">
          <animate attributeName="dx" attributeType="XML" values="0; 0; 0; -3; 0; 8; 0 ;-1; 0" dur="0.15s" repeatCount="indefinite"/>
        </feOffset>
        <feColorMatrix in="SourceGraphic" mode="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 1 0 0  0 0 0 1 0" result="b"/>
        <feOffset in="b" result="b" dx="5" dy="2">
          <animate attributeName="dx" attributeType="XML" values="0; 3; -1; 4; 0; 2; 0 ;18; 0" dur="0.35s" repeatCount="indefinite"/>
        </feOffset>
        <feBlend in="r" in2="g" mode="screen" result="blend" />
        <feBlend in="blend" in2="b" mode="screen" result="blend" />
      </filter>
    </defs>
</svg>