如何仅在 Vue.js 中模糊 svg 背景？

Posted

技术标签:

【中文标题】如何仅在 Vue.js 中模糊 svg 背景？【英文标题】：How do I only blur an svg background in Vue.js? 【发布时间】：2021-09-26 14:35:14 【问题描述】：

如何仅模糊我在 Vue 应用上设置的背景 svg？

我在 App.vue 的 html 元素上使用 CSS background-image 设置了我的背景。

我想模糊背景，但没有其他元素并且无法做到。

看来我必须将背景图像放在 html 标记中，以便图像正确位于我的其他组件后面。如果不是因为这个，我会把背景图片放在它自己的 div 中并模糊它。

到目前为止我所尝试的：

html:not(#app)：目标是模糊 html，但不过滤应用和仪表板中的所有内容。

在 svg 文件中配置 feGaussianBlur。

相关代码sn-ps：

CSS

   html 
  background-image: url('./assets/background_2.svg') ;
  background-size:cover;
  background-position:center;
  background-repeat: no-repeat;
  z-index: -1;
  /* filter:blur(27px); */
  


html:not(#app)
  filter:blur(27px);
 

/* #Rectangle_8
  filter:url(#blurFilter);
  
 */

SVG


<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"   viewBox="0 0 1920 1080">
    
      <defs>
      <filter id="blurFilter">
        <feGaussianBlur in="SourceGraphic" stdDeviation="7"/>
    </filter>
      <clipPath>
      
      <rect id="Rectangle_8" data-name="Rectangle 8"   fill="#fff" stroke="#707070" stroke- filter="url(#blurFilter)"/>

      </clipPath>
      
    </defs>
    
    <g id="Mask_Group_1" data-name="Mask Group 1" clip-path="url(#clip-path)">
      <g id="Path_4" data-name="Path 4" transform="translate(902 -324)" fill="#ff861c">
        <path d="M 278.5617980957031 1351.677978515625 C 263.9273376464844 1351.6748046875 247.7490539550781 1348.796264648438 230.4747467041016 1343.1220703125 C 214.0073394775391 1337.712890625 196.5427398681641 1329.768676757813 178.5661468505859 1319.510131835938 C 161.2417449951172 1309.62353515625 143.56494140625 1297.662475585938 126.026741027832 1283.95947265625 C 108.838737487793 1270.530151367188 92.01033782958984 1255.607299804688 76.00853729248047 1239.60546875 C 60.00674057006836 1223.603759765625 45.08394241333008 1206.775146484375 31.654541015625 1189.587158203125 C 17.95133972167969 1172.048950195313 5.990540504455566 1154.3720703125 -3.896059274673462 1137.047729492188 C -14.15465927124023 1119.071166992188 -22.0988597869873 1101.606567382813 -27.50805854797363 1085.13916015625 C -33.18526077270508 1067.855346679688 -36.06385803222656 1051.668334960938 -36.06385803222656 1037.027587890625 L -36.06385803222656 1036.918090820313 L -36.10945892333984 1036.818725585938 L -219.5116577148438 637.6781616210938 L -219.5116577148438 430.5763549804688 L 0.3463406264781952 219.3605346679688 L 0.4999406337738037 219.2129211425781 L 0.4999406337738037 218.9999237060547 C 0.4999406337738037 204.1747283935547 1.993540644645691 189.3589324951172 4.939140796661377 174.9641265869141 C 7.809740543365479 160.9353332519531 12.09334087371826 147.1363220214844 17.67053985595703 133.9501342773438 C 23.1467399597168 121.0031280517578 29.92454147338867 108.5159301757813 37.81613922119141 96.83493041992188 C 45.63274002075195 85.26493072509766 54.60953903198242 74.38492584228516 64.49713897705078 64.49713134765625 C 74.38494110107422 54.60952758789063 85.26493835449219 45.63272857666016 96.83493804931641 37.81612777709961 C 108.5159378051758 29.92452812194824 121.0031433105469 23.146728515625 133.9501342773438 17.67052841186523 C 147.1363372802734 12.09332847595215 160.9353332519531 7.809728145599365 174.9641418457031 4.939128398895264 C 189.3589477539063 1.993528246879578 204.1747436523438 0.4999282360076904 218.9999389648438 0.4999282360076904 L 1090 0.4999282360076904 C 1104.8251953125 0.4999282360076904 1119.640991210938 1.993528246879578 1134.035888671875 4.939128398895264 C 1148.064575195313 7.809728145599365 1161.86376953125 12.09332847595215 1175.049926757813 17.67052841186523 C 1187.996704101563 23.146728515625 1200.484130859375 29.92452812194824 1212.164916992188 37.81612777709961 C 1223.735107421875 45.63272857666016 1234.615112304688 54.60952758789063 1244.502685546875 64.49713134765625 C 1254.390502929688 74.38492584228516 1263.367309570313 85.26493072509766 1271.183959960938 96.83493041992188 C 1279.075317382813 108.5159301757813 1285.853393554688 121.0031280517578 1291.329345703125 133.9501342773438 C 1296.906494140625 147.1363220214844 1301.190185546875 160.9353332519531 1304.060791015625 174.9641265869141 C 1307.00634765625 189.3589324951172 1308.5 204.1747283935547 1308.5 218.9999237060547 L 1308.5 989.9999389648438 C 1308.5 1004.825134277344 1307.00634765625 1019.640930175781 1304.060791015625 1034.035888671875 C 1301.190185546875 1048.064575195313 1296.906494140625 1061.86376953125 1291.329345703125 1075.049926757813 C 1285.853393554688 1087.996704101563 1279.075317382813 1100.484130859375 1271.183959960938 1112.164916992188 C 1263.367309570313 1123.735107421875 1254.390502929688 1134.615112304688 1244.502685546875 1144.502685546875 C 1234.615112304688 1154.390502929688 1223.735107421875 1163.367309570313 1212.164916992188 1171.183959960938 C 1200.484130859375 1179.075317382813 1187.996704101563 1185.853271484375 1175.049926757813 1191.329345703125 C 1161.86376953125 1196.906494140625 1148.064575195313 1201.190185546875 1134.035888671875 1204.060668945313 C 1119.640991210938 1207.00634765625 1104.8251953125 1208.499877929688 1090 1208.499877929688 L 1089.877319335938 1208.499877929688 L 1089.7685546875 1208.556762695313 L 936.318359375 1288.659423828125 L 278.5617980957031 1351.677978515625 Z" stroke="none"/>
        <path d="M 218.9999389648438 0.9998779296875 C 204.2083129882813 0.9998779296875 189.4261474609375 2.4901123046875 175.0643310546875 5.428955078125 C 161.0679321289063 8.29296875 147.300537109375 12.5665283203125 134.1447143554688 18.131103515625 C 121.2275390625 23.594482421875 108.7689208984375 30.35693359375 97.11474609375 38.2303466796875 C 85.5711669921875 46.0291748046875 74.7159423828125 54.9854736328125 64.8507080078125 64.8507080078125 C 54.985595703125 74.7159423828125 46.0291748046875 85.5711669921875 38.2303466796875 97.11474609375 C 30.35693359375 108.7689208984375 23.594482421875 121.227783203125 18.131103515625 134.1448974609375 C 12.5665283203125 147.30078125 8.29296875 161.06787109375 5.428955078125 175.0643310546875 C 2.4901123046875 189.4261474609375 1 204.2083740234375 1 218.9998779296875 L 1 219.4259033203125 L 0.6927490234375 219.7210693359375 L -219.01171875 430.7891845703125 L -219.01171875 637.5690307617188 L -35.655517578125 1036.60986328125 L -35.5640869140625 1036.808715820313 L -35.5640869140625 1037.027587890625 C -35.5640869140625 1051.615112304688 -32.69384765625 1067.749755859375 -27.033203125 1084.98291015625 C -21.6346435546875 1101.418701171875 -13.7041015625 1118.8525390625 -3.4619140625 1136.799926757813 C 6.4127197265625 1154.103515625 18.3599853515625 1171.760131835938 32.04833984375 1189.279296875 C 45.465087890625 1206.451293945313 60.3743896484375 1223.264526367188 76.3619384765625 1239.251953125 C 92.349365234375 1255.239379882813 109.1625366210938 1270.148681640625 126.3343505859375 1283.565551757813 C 143.853759765625 1297.253784179688 161.5103149414063 1309.201171875 178.813720703125 1319.07568359375 C 196.7613525390625 1329.31787109375 214.1951293945313 1337.24853515625 230.6307373046875 1342.647094726563 C 247.84521484375 1348.301513671875 263.9641723632813 1351.171630859375 278.5391235351563 1351.177856445313 L 936.1732788085938 1288.1708984375 L 1089.537109375 1208.113525390625 L 1089.754760742188 1207.999877929688 L 1090 1207.999877929688 C 1104.79150390625 1207.999877929688 1119.57373046875 1206.509765625 1133.935546875 1203.570922851563 C 1147.931884765625 1200.706909179688 1161.699340820313 1196.433349609375 1174.855102539063 1190.868774414063 C 1187.772338867188 1185.4052734375 1200.23095703125 1178.642944335938 1211.885131835938 1170.76953125 C 1223.4287109375 1162.970703125 1234.283935546875 1154.014282226563 1244.149169921875 1144.149169921875 C 1254.014404296875 1134.283935546875 1262.970703125 1123.4287109375 1270.76953125 1111.885131835938 C 1278.642944335938 1100.23095703125 1285.4052734375 1087.772338867188 1290.868774414063 1074.855102539063 C 1296.433349609375 1061.699340820313 1300.706909179688 1047.931884765625 1303.570922851563 1033.935546875 C 1306.509765625 1019.57373046875 1308 1004.79150390625 1308 989.9999389648438 L 1308 218.9998779296875 C 1308 204.2083740234375 1306.509765625 189.4261474609375 1303.570922851563 175.0643310546875 C 1300.706909179688 161.06787109375 1296.433349609375 147.30078125 1290.868774414063 134.1448974609375 C 1285.4052734375 121.227783203125 1278.642944335938 108.7689208984375 1270.76953125 97.11474609375 C 1262.970703125 85.5711669921875 1254.014404296875 74.7159423828125 1244.149169921875 64.8507080078125 C 1234.283935546875 54.9854736328125 1223.4287109375 46.0291748046875 1211.885131835938 38.2303466796875 C 1200.23095703125 30.35693359375 1187.772338867188 23.594482421875 1174.855102539063 18.131103515625 C 1161.699340820313 12.5665283203125 1147.931884765625 8.29296875 1133.935546875 5.428955078125 C 1119.57373046875 2.4901123046875 1104.79150390625 0.9998779296875 1090 0.9998779296875 L 218.9999389648438 0.9998779296875 M 218.9999389648438 -0.0001220703125 L 1090 -0.0001220703125 C 1210.950317382813 -0.0001220703125 1309 98.0496826171875 1309 218.9998779296875 L 1309 989.9999389648438 C 1309 1110.950317382813 1210.950317382813 1208.999877929688 1090 1208.999877929688 L 936.4629516601563 1289.147705078125 L 278.5863647460938 1352.177978515625 C 157.6359252929688 1352.177978515625 -36.5640869140625 1157.977783203125 -36.5640869140625 1037.027587890625 L -220.01171875 637.7877197265625 L -220.01171875 430.3630981445313 L 0 218.9998779296875 C 0 98.0496826171875 98.049560546875 -0.0001220703125 218.9999389648438 -0.0001220703125 Z" stroke="none" fill="#707070"/>
      </g>
      <g id="Path_5" data-name="Path 5" transform="translate(-173 -87)" fill="#71bee6">
        <path d="M 436.5000305175781 1307.5 C 421.6358642578125 1307.5 406.6455383300781 1306.365844726563 391.9457092285156 1304.129150390625 C 377.4580383300781 1301.924682617188 362.9002075195313 1298.595825195313 348.6765441894531 1294.234985351563 C 334.6360473632813 1289.930297851563 320.5835571289063 1284.516479492188 306.9095458984375 1278.144165039063 C 293.38720703125 1271.842651367188 279.9133911132813 1264.453857421875 266.8622131347656 1256.183227539063 C 253.9303741455078 1247.988037109375 241.1088714599609 1238.73388671875 228.7538757324219 1228.677978515625 C 216.4855499267578 1218.692504882813 204.390380859375 1207.683227539063 192.8043823242188 1195.955688476563 C 181.2733764648438 1184.283813476563 169.9788818359375 1171.629272460938 159.2342071533203 1158.343872070313 C 148.5152130126953 1145.089721679688 138.09521484375 1130.900512695313 128.2638702392578 1116.170166015625 C 118.4317092895508 1101.439208984375 108.9605407714844 1085.82568359375 100.1133804321289 1069.763549804688 C 91.24404144287109 1053.6611328125 82.79570770263672 1036.734008789063 75.00321197509766 1019.452026367188 C 67.17254638671875 1002.085510253906 59.82120895385742 983.955322265625 53.1532096862793 965.5648193359375 C 46.43754196166992 947.0419921875 40.25704193115234 927.8193359375 34.78354263305664 908.4304809570313 C 29.25887680053711 888.8603515625 24.32337760925293 868.6558227539063 20.11371040344238 848.3779907226563 C 15.85654354095459 827.870361328125 12.23970985412598 806.7944946289063 9.363543510437012 785.7361450195313 C 6.449710369110107 764.4014892578125 4.22554349899292 742.565185546875 2.752543687820435 720.8338623046875 C 1.257876992225647 698.7833251953125 0.5000436305999756 676.2971801757813 0.5000436305999756 654 C 0.5000436305999756 631.7028198242188 1.257876992225647 609.2166748046875 2.752543687820435 587.1661376953125 C 4.22554349899292 565.434814453125 6.449710369110107 543.5985107421875 9.363543510437012 522.2638549804688 C 12.23970985412598 501.2055053710938 15.85654354095459 480.1296691894531 20.11371040344238 459.6220092773438 C 24.32337760925293 439.3441772460938 29.25887680053711 419.1396789550781 34.78354263305664 399.5694885253906 C 40.25704193115234 380.1806640625 46.43754196166992 360.9580078125 53.1532096862793 342.4351806640625 C 59.82120895385742 324.044677734375 67.17254638671875 305.9144897460938 75.00321197509766 288.5480041503906 C 82.79570770263672 271.2659912109375 91.24404144287109 254.3388366699219 100.1133804321289 238.2364959716797 C 108.9605407714844 222.1743316650391 118.4317092895508 206.5608367919922 128.2638702392578 191.829833984375 C 138.09521484375 177.0995025634766 148.5152130126953 162.9103393554688 159.2342071533203 149.6561737060547 C 169.9788818359375 136.3706665039063 181.2733764648438 123.7161636352539 192.8043823242188 112.0443344116211 C 204.390380859375 100.3168334960938 216.4855499267578 89.30750274658203 228.7538757324219 79.32199859619141 C 241.1088714599609 69.26616668701172 253.9303741455078 60.01200103759766 266.8622131347656 51.81683349609375 C 279.9133911132813 43.54616546630859 293.38720703125 36.15733337402344 306.9095458984375 29.85583305358887 C 320.5835571289063 23.48349952697754 334.6360473632813 18.06966590881348 348.6765441894531 13.76500034332275 C 362.9002075195313 9.404166221618652 377.4580383300781 6.075333118438721 391.9457092285156 3.870833396911621 C 406.6455383300781 1.634166717529297 421.6358642578125 0.5 436.5000305175781 0.5 C 457.0365295410156 0.5 479.57421875 2.387166738510132 501.6765441894531 5.957499980926514 C 513.82421875 7.919833183288574 525.9141845703125 10.3978328704834 537.6107177734375 13.32283306121826 C 550.1170654296875 16.45033264160156 562.335205078125 20.13050079345703 573.9259033203125 24.26099967956543 C 599.5985717773438 33.40983200073242 622.5538940429688 44.85966491699219 642.1543579101563 58.29266738891602 C 652.8470458984375 65.62083435058594 662.6528930664063 73.63116455078125 671.299560546875 82.100830078125 C 680.4480590820313 91.06216430664063 688.5210571289063 100.7563323974609 695.2940673828125 110.9136657714844 C 698.08154296875 115.0940017700195 700.6920166015625 119.6448364257813 703.05322265625 124.4394989013672 C 705.3030395507813 129.0081634521484 707.4002075195313 133.9488372802734 709.2865600585938 139.1241607666016 C 712.7670288085938 148.6726684570313 715.6295166015625 159.1855010986328 718.0380249023438 171.2638397216797 C 722.5106811523438 193.6946716308594 724.6602172851563 218.0619964599609 726.739013671875 241.6269989013672 C 728.5530395507813 262.190673828125 730.4288940429688 283.454345703125 733.8402099609375 302.7901611328125 C 735.6762084960938 313.1969909667969 737.8035278320313 322.2745056152344 740.3438720703125 330.5416564941406 C 743.19384765625 339.8166809082031 746.490234375 347.8550109863281 750.4216918945313 355.1158447265625 C 757.9615478515625 369.0413208007813 766.1862182617188 382.9613342285156 775.5657348632813 397.6713256835938 C 783.8413696289063 410.6501770019531 791.9308471679688 422.5669860839844 799.7540283203125 434.0916748046875 C 809.9585571289063 449.1241760253906 819.5970458984375 463.322998046875 828.3300170898438 477.9503479003906 C 838.1008911132813 494.3158264160156 845.4370727539063 509.0403442382813 851.4175415039063 524.2890014648438 C 858.363525390625 541.9993286132813 863.4161987304688 560.3870239257813 866.8643798828125 580.5028076171875 C 868.708740234375 591.2625122070313 870.1153564453125 602.744140625 871.0453491210938 614.6288452148438 C 872.0106811523438 626.9639892578125 872.5000610351563 640.2103271484375 872.5000610351563 654 C 872.5000610351563 662.896484375 873.2545166015625 672.087158203125 874.7425537109375 681.3165283203125 C 876.1563720703125 690.086669921875 878.278564453125 699.1741943359375 881.050048828125 708.3268432617188 C 883.6622314453125 716.9531860351563 886.9403686523438 725.9306640625 890.7935180664063 735.010009765625 C 894.3838500976563 743.469482421875 898.6070556640625 752.330810546875 903.345703125 761.3474731445313 C 921.6698608398438 796.2138061523438 945.8021850585938 830.1036376953125 969.139892578125 862.877685546875 C 982.5197143554688 881.66748046875 995.1575317382813 899.4151611328125 1006.579528808594 917.0894775390625 C 1012.711547851563 926.5781860351563 1017.908203125 935.1446533203125 1022.466369628906 943.2786865234375 C 1027.563232421875 952.3741455078125 1031.752563476563 960.7261962890625 1035.2734375 968.81201171875 C 1039.03857421875 977.4588623046875 1042.011840820313 985.816650390625 1044.110717773438 993.6530151367188 C 1046.346435546875 1002.000671386719 1047.686889648438 1010.113342285156 1048.094848632813 1017.765686035156 C 1048.5244140625 1025.823852539063 1047.9375 1033.683227539063 1046.3505859375 1041.125122070313 C 1044.691650390625 1048.90380859375 1041.880737304688 1056.5087890625 1037.995727539063 1063.729125976563 C 1019.366027832031 1098.352661132813 982.9494018554688 1132.184326171875 929.7572021484375 1164.284301757813 C 906.0025634765625 1178.61962890625 878.8023681640625 1192.637451171875 848.9125366210938 1205.948364257813 C 821.15087890625 1218.311279296875 790.8618774414063 1230.161376953125 758.8865356445313 1241.1689453125 C 729.1018676757813 1251.422607421875 697.9027099609375 1260.933837890625 666.155517578125 1269.438110351563 C 636.291015625 1277.438354492188 606.3603515625 1284.441040039063 577.1947021484375 1290.251342773438 C 521.3627319335938 1301.374389648438 471.3963623046875 1307.5 436.5000305175781 1307.5 Z" stroke="none"/>
        <path d="M 436.5000610351563 1 C 421.660888671875 1 406.696044921875 2.1322021484375 392.0208740234375 4.3651123046875 C 377.557373046875 6.5657958984375 363.0235595703125 9.8892822265625 348.8231811523438 14.2430419921875 C 334.8045654296875 18.541015625 320.7738647460938 23.9462890625 307.1207275390625 30.3089599609375 C 293.6177368164063 36.6014404296875 280.1629028320313 43.97998046875 267.1298828125 52.2391357421875 C 254.2145385742188 60.423828125 241.4092407226563 69.6663818359375 229.0693969726563 79.7098388671875 C 216.8150634765625 89.683837890625 204.7333984375 100.6810302734375 193.1600341796875 112.3956298828125 C 181.6406860351563 124.0557861328125 170.3572387695313 136.697998046875 159.623046875 149.970703125 C 148.9135131835938 163.212890625 138.502685546875 177.3896484375 128.6796875 192.1072998046875 C 118.8555297851563 206.82666015625 109.3917236328125 222.427978515625 100.5513916015625 238.477783203125 C 91.6883544921875 254.5684814453125 83.24603271484375 271.483642578125 75.45904541015625 288.7534790039063 C 67.633544921875 306.1085205078125 60.286865234375 324.2269897460938 53.6234130859375 342.6056518554688 C 46.9117431640625 361.1170043945313 40.73486328125 380.3281860351563 35.2647705078125 399.705322265625 C 29.743408203125 419.26416015625 24.810546875 439.4573364257813 20.6033935546875 459.7236938476563 C 16.348388671875 480.2201538085938 12.7335205078125 501.2844848632813 9.8590087890625 522.3314819335938 C 6.9466552734375 543.655029296875 4.7235107421875 565.4798583984375 3.2513427734375 587.2000122070313 C 1.757568359375 609.2393188476563 1 631.7141723632813 1 654 C 1 676.2858276367188 1.757568359375 698.7606811523438 3.2513427734375 720.7999877929688 C 4.7235107421875 742.5201416015625 6.9466552734375 764.344970703125 9.8590087890625 785.6685180664063 C 12.7335205078125 806.7155151367188 16.348388671875 827.7798461914063 20.6033935546875 848.2763671875 C 24.810546875 868.5426635742188 29.743408203125 888.73583984375 35.2647705078125 908.294677734375 C 40.73486328125 927.671875 46.9117431640625 946.8829956054688 53.6234130859375 965.3943481445313 C 60.286865234375 983.7730102539063 67.633544921875 1001.891479492188 75.45904541015625 1019.246459960938 C 83.24603271484375 1036.516357421875 91.6883544921875 1053.431518554688 100.5513916015625 1069.522216796875 C 109.3917236328125 1085.572021484375 118.8555297851563 1101.17333984375 128.6796875 1115.892700195313 C 138.502685546875 1130.6103515625 148.9135131835938 1144.787109375 159.623046875 1158.029296875 C 170.3572387695313 1171.302001953125 181.6406860351563 1183.944213867188 193.1600341796875 1195.604370117188 C 204.7333984375 1207.318969726563 216.8150634765625 1218.316162109375 229.0693969726563 1228.290161132813 C 241.4092407226563 1238.333618164063 254.2145385742188 1247.576171875 267.1298828125 1255.760864257813 C 280.1629028320313 1264.02001953125 293.6177368164063 1271.3984375 307.1207275390625 1277.691040039063 C 320.7738647460938 1284.0537109375 334.8045654296875 1289.458984375 348.8231811523438 1293.756958007813 C 363.0235595703125 1298.110717773438 377.557373046875 1301.434204101563 392.0208740234375 1303.634887695313 C 406.696044921875 1305.867797851563 421.660888671875 1307 436.5000610351563 1307 C 471.3645629882813 1307 521.2962036132813 1300.877685546875 577.0970458984375 1289.760986328125 C 606.2520751953125 1283.95263671875 636.1722412109375 1276.95263671875 666.0262451171875 1268.955322265625 C 697.76220703125 1260.453857421875 728.9501953125 1250.946044921875 758.7237548828125 1240.6962890625 C 790.6853637695313 1229.693359375 820.960693359375 1217.8486328125 848.709228515625 1205.491455078125 C 878.5802001953125 1192.189208984375 905.76171875 1178.181030273438 929.4989013671875 1163.856323242188 C 982.6134033203125 1131.80322265625 1018.968688964844 1098.035888671875 1037.555419921875 1063.4921875 C 1041.418090820313 1056.313720703125 1044.212524414063 1048.753173828125 1045.861572265625 1041.020874023438 C 1047.439331054688 1033.621826171875 1048.022827148438 1025.806640625 1047.595581054688 1017.792358398438 C 1047.189331054688 1010.174499511719 1045.854370117188 1002.096496582031 1043.627685546875 993.7823486328125 C 1041.53515625 985.9698486328125 1038.570190429688 977.6358642578125 1034.815063476563 969.0116577148438 C 1031.300903320313 960.941162109375 1027.118896484375 952.6038208007813 1022.030212402344 943.523193359375 C 1017.477233886719 935.3983154296875 1012.285888671875 926.8406982421875 1006.159545898438 917.36083984375 C 994.7437133789063 899.6961669921875 982.1090698242188 881.9528198242188 968.7325439453125 863.1676635742188 C 945.3851928710938 830.380126953125 921.2430419921875 796.4765014648438 902.9031982421875 761.5801391601563 C 898.1580810546875 752.5513305664063 893.9288940429688 743.677490234375 890.3333740234375 735.205322265625 C 886.4730224609375 726.1096801757813 883.188720703125 717.1151733398438 880.571533203125 708.4716796875 C 877.7935791015625 699.2978515625 875.6663818359375 690.1881713867188 874.2489013671875 681.3961791992188 C 872.7567138671875 672.1405029296875 872.0000610351563 662.9231567382813 872.0000610351563 654 C 872.0000610351563 640.2233276367188 871.51123046875 626.989990234375 870.546875 614.6678466796875 C 869.6182250976563 602.79833984375 868.21337890625 591.3319702148438 866.3715209960938 580.587158203125 C 862.92919921875 560.5053100585938 857.8855590820313 542.149658203125 850.9520263671875 524.4713134765625 C 844.981689453125 509.2490234375 837.6570434570313 494.5478515625 827.9006958007813 478.2063598632813 C 819.1751708984375 463.5914916992188 809.54052734375 449.3984985351563 799.3402099609375 434.3721923828125 C 791.5151977539063 422.8448486328125 783.423583984375 410.9248046875 775.14404296875 397.9400024414063 C 765.758056640625 383.219970703125 757.527587890625 369.2899780273438 749.9820556640625 355.35400390625 C 746.03466796875 348.0634765625 742.7257080078125 339.995361328125 739.8658447265625 330.6884765625 C 737.319580078125 322.4014892578125 735.1873779296875 313.3043212890625 733.347900390625 302.8770141601563 C 729.9327392578125 283.519775390625 728.055908203125 262.2451171875 726.2410888671875 241.6710205078125 C 724.1633911132813 218.119384765625 722.0150146484375 193.765625 717.5475463867188 171.3614501953125 C 715.1441650390625 159.3084716796875 712.2883911132813 148.8194580078125 708.8167114257813 139.2952880859375 C 706.9365234375 134.1368408203125 704.8463745117188 129.212890625 702.6043701171875 124.66015625 C 700.2528686523438 119.885009765625 697.6533813476563 115.3531494140625 694.8778686523438 111.1910400390625 C 688.1240234375 101.0623779296875 680.0733642578125 91.3951416015625 670.9495849609375 82.4580078125 C 662.32373046875 74.008544921875 652.5404052734375 66.016845703125 641.87158203125 58.7049560546875 C 622.306884765625 45.2965087890625 599.3900146484375 33.8663330078125 573.758056640625 24.7320556640625 C 562.1825561523438 20.6068115234375 549.9800415039063 16.9315185546875 537.4895629882813 13.8079833984375 C 525.8065185546875 10.8863525390625 513.7305297851563 8.4111328125 501.5967407226563 6.4510498046875 C 479.5203857421875 2.885009765625 457.0103759765625 1 436.5000610351563 1 M 436.5000610351563 0 C 513.8648681640625 0 639.6485595703125 26.561279296875 695.7098388671875 110.6361083984375 C 738.9984130859375 175.5556640625 716.0830078125 290.6448364257813 750.8613891601563 354.8778076171875 C 811.8077392578125 467.4408569335938 873.0000610351563 497.9641723632813 873.0000610351563 654 C 873.0000610351563 809.3134765625 1098.94775390625 951.50537109375 1038.43603515625 1063.966064453125 C 958.5748901367188 1212.389526367188 573.9111938476563 1308 436.5000610351563 1308 C 195.427734375 1308 0 1015.194152832031 0 654 C 0 292.8058471679688 195.427734375 0 436.5000610351563 0 Z" stroke="none" fill="#707070"/>
      </g>
    </g>
  </svg>

【问题讨论】：

过滤器将模糊元素及其所有子元素。您需要图像来自单个元素，该元素可以独立于网站的其余部分进行模糊处理。 【参考方案1】：

可能最简单的解决方法是在 SVG 内部模糊 SVG 的内容。然后从你的 CSS 中移除模糊过滤器。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"   viewBox="0 0 1920 1080">

  <defs>
    <filter id="blurFilter">
      <feGaussianBlur in="SourceGraphic" stdDeviation="7"/>
    </filter>
  </defs>
    
  <g id="Mask_Group_1" data-name="Mask Group 1" filter="url(#blurFilter)">
    <g id="Path_4" data-name="Path 4" transform="translate(902 -324)" fill="#ff861c">
      [...snip...]
    </g>
  </g>
</svg>

请注意，我已经删除了没有执行任何操作的 &lt;clipPath&gt; 元素。

【讨论】：

我试过这个。 feGaussianBlur 没有效果。

以上是关于如何仅在 Vue.js 中模糊 svg 背景？的主要内容，如果未能解决你的问题，请参考以下文章

如何在iOS上仅在具有清晰颜色的模糊视图底部获得圆角？

如何仅在 vue.js 中对特定点击的卡片应用切换/样式？

CSS：仅在一个方向上缩放背景 SVG

如何仅在父组件完全挂载时挂载 vue js 子组件-我正在使用 $refs

使用 vuetify / Vue.js 控制 svg 的颜色

如何仅在我的活动页面中自定义导航项元素