如何使 SVG 文本故障效果影响 SVG 路径
How to make an SVG text glitch effect affect an SVG path instead
我正在使用 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 而不是文本上起作用？
提前致谢
正如 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>
我正在使用 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 而不是文本上起作用？
提前致谢
正如 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>