我使用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而不是文本中起作用？
提前致谢
答案 0 :(得分：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>