如何使 SVG 文本故障效果影响 SVG 路径

Question

我正在使用 SVG 效果在一些文本上产生故障效果，但我希望它改为影响徽标。徽标也是 SVG，使用路径。

Here is the website showing the effect, as you can see the text is glitched rather than the diamond.

代码如下：

正文：

                <svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
     width="800px" height="110px" viewBox="0 0 800 110" style="margin-left: 116px;">
<style type="text/css">

<![CDATA[

    text {
        filter: url(#filter);
        fill: white;
        font-size: 100px;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
            }
]]>
</style>
    <defs>

        <filter id="filter">
            <feFlood flood-color="black" result="black" />
            <feFlood flood-color="red" result="flood1" />
            <feFlood flood-color="limegreen" result="flood2" />
            <feOffset in="SourceGraphic" dx="3" dy="0" result="off1a"/>
            <feOffset in="SourceGraphic" dx="2" dy="0" result="off1b"/>
            <feOffset in="SourceGraphic" dx="-3" dy="0" result="off2a"/>
            <feOffset in="SourceGraphic" dx="-2" dy="0" result="off2b"/>
            <feComposite in="flood1" in2="off1a" operator="in"  result="comp1" />
            <feComposite in="flood2" in2="off2a" operator="in" result="comp2" />

            <feMerge x="0" width="100%" result="merge1">
                <feMergeNode in = "black" />
                <feMergeNode in = "comp1" />
                <feMergeNode in = "off1b" />

                <animate 
                    attributeName="y" 
                    id = "y"
                    dur ="4s"

                    values = '104px; 104px; 30px; 105px; 30px; 2px; 2px; 50px; 40px; 105px; 105px; 20px; 6ßpx; 40px; 104px; 40px; 70px; 10px; 30px; 104px; 102px'

                    keyTimes = '0; 0.362; 0.368; 0.421; 0.440; 0.477; 0.518; 0.564; 0.593; 0.613; 0.644; 0.693; 0.721; 0.736; 0.772; 0.818; 0.844; 0.894; 0.925; 0.939; 1'

                    repeatCount = "indefinite" />

                <animate attributeName="height" 
                    id = "h" 
                    dur ="4s"

                    values = '10px; 0px; 10px; 30px; 50px; 0px; 10px; 0px; 0px; 0px; 10px; 50px; 40px; 0px; 0px; 0px; 40px; 30px; 10px; 0px; 50px'

                    keyTimes = '0; 0.362; 0.368; 0.421; 0.440; 0.477; 0.518; 0.564; 0.593; 0.613; 0.644; 0.693; 0.721; 0.736; 0.772; 0.818; 0.844; 0.894; 0.925; 0.939; 1'

                    repeatCount = "indefinite" />
            </feMerge>


            <feMerge x="0" width="100%" y="60px" height="65px" result="merge2">
                <feMergeNode in = "black" />
                <feMergeNode in = "comp2" />
                <feMergeNode in = "off2b" />

                <animate attributeName="y" 
                    id = "y"
                    dur ="4s"
                    values = '103px; 104px; 69px; 53px; 42px; 104px; 78px; 89px; 96px; 100px; 67px; 50px; 96px; 66px; 88px; 42px; 13px; 100px; 100px; 104px;' 

                    keyTimes = '0; 0.055; 0.100; 0.125; 0.159; 0.182; 0.202; 0.236; 0.268; 0.326; 0.357; 0.400; 0.408; 0.461; 0.493; 0.513; 0.548; 0.577; 0.613; 1'

                    repeatCount = "indefinite" />

                <animate attributeName="height" 
                    id = "h"
                    dur = "4s"

                    values = '0px; 0px; 0px; 16px; 16px; 12px; 12px; 0px; 0px; 5px; 10px; 22px; 33px; 11px; 0px; 0px; 10px'

                    keyTimes = '0; 0.055; 0.100; 0.125; 0.159; 0.182; 0.202; 0.236; 0.268; 0.326; 0.357; 0.400; 0.408; 0.461; 0.493; 0.513;  1'

                    repeatCount = "indefinite" />
            </feMerge>

            <feMerge>
                <feMergeNode in="SourceGraphic" />  

                <feMergeNode in="merge1" /> 
            <feMergeNode in="merge2" />

            </feMerge>
        </filter>

    </defs>

<g>
    <text x="0" y="100">ROYAL ARCADE</text>

    </g>
</svg>

钻石：

    <div style="margin-top: -30px;">
                    <div class="glitch">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="200px" height="300px" viewBox="0 0 1136.943 907.455" enable-background="new 0 0 1136.943 907.455"
     xml:space="preserve">
     <defs>
     <linearGradient id="rgrad__uniqueID_756c7399" x1="100%" y1="0%" x2="46%" y2="100%" gradientUnits="objectBoundingBox">
   <stop offset="0%" style="stop-color:rgb(0, 255, 244); stop-opacity:1"></stop>
   <stop offset="46%" style="stop-color:rgb(0, 74, 255); stop-opacity:1"></stop>
   <stop offset="98%" style="stop-color:rgb(127, 46, 208); stop-opacity:1"></stop>
</linearGradient>
     </defs>
<path fill-rule="evenodd" clip-rule="evenodd" fill="url(#rgrad__uniqueID_756c7399)" d="M970.566,15.158H166.187L8.808,259.969v8.744l555.197,629.514
    h8.743l555.196-625.142v-13.116L970.566,15.158z M887.504,58.875l-87.433,139.892L642.694,58.875H887.504z M765.099,238.112H371.652
    L568.376,54.503L765.099,238.112z M494.059,58.875l-153.007,135.52l-87.433-135.52H494.059z M192.417,58.875l113.662,179.237H78.754
    L192.417,58.875z M78.754,281.828h236.068L515.917,771.45L78.754,281.828z M568.376,771.45L367.281,281.828h402.19L568.376,771.45z
     M620.835,771.45L821.93,281.828h236.068L620.835,771.45z M830.673,238.112L944.336,58.875l113.662,179.237H830.673z"/>
</svg>
                    </div>

总而言之，如何使故障效果在 Diamond SVG 而不是文本上起作用？

提前致谢

Answer 1

正如 Kaiido 所说，您真正需要做的就是对您的徽标应用相同的过滤器。它需要一些调整大小以使其正确适合，如果您将绿色和红色填充颜色调低，它看起来会更好。但除此之外，什么都没有改变：

<svg width="200" height="160" viewBox="0 0 200 160">
  <defs>
    <linearGradient id="grad" x1="100%" y1="0%" x2="46%" y2="100%"
        gradientUnits="objectBoundingBox">
      <stop offset="0%" style="stop-color:rgb(0, 255, 244); stop-opacity:1"></stop>
      <stop offset="46%" style="stop-color:rgb(0, 74, 255); stop-opacity:1"></stop>
      <stop offset="98%" style="stop-color:rgb(127, 46, 208); stop-opacity:1"></stop>
    </linearGradient>
    <filter id="filter">
      <feFlood flood-color="black" result="black"/>
      <feFlood flood-color="darkred" result="flood1"/>
      <feFlood flood-color="darkgreen" result="flood2"/>
      <feOffset in="SourceGraphic" dx="3" dy="0" result="off1a"/>
      <feOffset in="SourceGraphic" dx="2" dy="0" result="off1b"/>
      <feOffset in="SourceGraphic" dx="-3" dy="0" result="off2a"/>
      <feOffset in="SourceGraphic" dx="-2" dy="0" result="off2b"/>
      <feComposite in="flood1" in2="off1a" operator="in"  result="comp1"/>
      <feComposite in="flood2" in2="off2a" operator="in" result="comp2"/>
      <feMerge x="0" width="100%" result="merge1">
        <feMergeNode in="black"/>
        <feMergeNode in="comp1"/>
        <feMergeNode in="off1b"/>
        <animate attributeName="y" id="y" dur ="4s"
            values="151px; 151px; 44px; 153px; 44px; 3px; 3px; 73px; 58px; 153px; 153px;
                29px; 9ßpx; 58px; 151px; 58px; 102px; 15px; 44px; 151px; 148px"
            keyTimes="0; 0.362; 0.368; 0.421; 0.440; 0.477; 0.518; 0.564; 0.593; 0.613;
                0.644; 0.693; 0.721; 0.736; 0.772; 0.818; 0.844; 0.894; 0.925; 0.939; 1"
            repeatCount="indefinite"/>
        <animate attributeName="height" id="h" dur ="4s"
            values="15px; 0px; 15px; 44px; 73px; 0px; 15px; 0px; 0px; 0px; 15px; 73px;
                58px; 0px; 0px; 0px; 58px; 44px; 15px; 0px; 73px"
            keyTimes="0; 0.362; 0.368; 0.421; 0.440; 0.477; 0.518; 0.564; 0.593; 0.613;
                0.644; 0.693; 0.721; 0.736; 0.772; 0.818; 0.844; 0.894; 0.925; 0.939; 1"
            repeatCount="indefinite"/>
      </feMerge>
      <feMerge x="0" width="100%" y="87px" height="95px" result="merge2">
        <feMergeNode in="black"/>
        <feMergeNode in="comp2"/>
        <feMergeNode in="off2b"/>
        <animate attributeName="y" id="y" dur ="4s"
            values="150px; 151px; 100px; 77px; 61px; 151px; 113px; 129px; 140px; 145px;
                97px; 73px; 140px; 96px; 128px; 61px; 19px; 145px; 145px; 151px;" 
            keyTimes="0; 0.055; 0.100; 0.125; 0.159; 0.182; 0.202; 0.236; 0.268; 0.326;
                0.357; 0.400; 0.408; 0.461; 0.493; 0.513; 0.548; 0.577; 0.613; 1"
            repeatCount="indefinite"/>
        <animate attributeName="height" id="h" dur="4s"
            values="0px; 0px; 0px; 23px; 23px; 17px; 17px; 0px; 0px; 7px; 15px; 32px;
                48px; 16px; 0px; 0px; 15px"
            keyTimes="0; 0.055; 0.100; 0.125; 0.159; 0.182; 0.202; 0.236; 0.268; 0.326;
                0.357; 0.400; 0.408; 0.461; 0.493; 0.513; 1"
            repeatCount="indefinite"/>
      </feMerge>
      <feMerge>
        <feMergeNode in="SourceGraphic"/>  
        <feMergeNode in="merge1"/> 
        <feMergeNode in="merge2"/>
      </feMerge>
    </filter>
  </defs>
  <rect x="0" y="0" width="200" height="160" fill="#000" stroke="none"/>
  <path fill-rule="evenodd" fill="url(#grad)" d="M170.73 2.67H29.23L1.55 45.73v1.54l97.66
      110.74h1.54l97.66-109.97v-2.31L170.73 2.67zM156.12 10.36l-15.38 24.61L113.06 10.36H
      156.12zM134.59 41.89H65.38L99.98 9.59L134.59 41.89zM86.91 10.36l-26.92 23.84l-15.38
      -23.84H86.91zM33.85 10.36l19.99 31.53H13.85L33.85 10.36zM13.85 49.58h41.53L90.76
      135.71L13.85 49.58zM99.98 135.71L64.61 49.58h70.75L99.98 135.71zM109.21 135.71L
      144.59 49.58h41.53L109.21 135.71zM146.12 41.89L166.12 10.36l19.99 31.53H146.12z"
      filter="url(#filter)"/>
</svg>