React.js:SVG 在 Chrome/Brave/Edge 中未正确显示
React.js: SVG is not being displayed properly in Chrome/Brave/Edge
我如何导入 .svg 文件:
import khinkali from "./imgs/khinkali.svg";
import fritters from "./imgs/fritters.svg";
import kebab from "./imgs/kebab.svg";
import pancakes from "./imgs/pancakes.svg";
import omurice from "./imgs/omurice.svg";
我以后如何使用它们(我将 src 作为 prop 传递):
<img src={src} alt="Food icon" style={{ width: 300 }} />
<svg viewBox="0 0 1920 1080" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_70:301)">
<rect width="1920" height="1080" fill="#EDEBDB"/>
<path d="M1920 1080V211L285 633L513 1080H1920Z" fill="#E8C978"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M1814.97 238.107L1920 439.846V511.417L1782.13 246.585L1814.97 238.107ZM1593.62 295.241L1920 913.365V984.147L1560.73 303.73L1593.62 295.241ZM1370.83 352.742L1737.96 1080H1700.94L1338.08 361.196L1370.83 352.742ZM1096.29 423.603L1444.23 1080H1406.82L1063.39 432.095L1096.29 423.603ZM857.622 485.204L1149.19 1080H1112.38L824.948 493.637L857.622 485.204ZM572.166 558.881L832.726 1080H795.775L539.439 567.328L572.166 558.881Z" fill="#EAD18F"/>
<path d="M1420.76 545.831C1417.54 800.414 1208.55 1004.18 953.963 1000.96C699.38 997.741 495.611 788.75 498.832 534.167C502.053 279.584 711.044 75.8152 965.627 79.0361C1220.21 82.257 1423.98 291.248 1420.76 545.831Z" fill="url(#paint0_linear_70:301)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M499.414 529.012L1420.31 540.663L1419.98 566.472L499.087 554.822L499.414 529.012Z" fill="#C2844C"/>
<path d="M1370.17 545.191C1367.3 771.836 1181.25 953.243 954.603 950.375C727.959 947.508 546.552 761.452 549.419 534.808C552.287 308.163 738.343 126.756 964.987 129.624C1191.63 132.491 1373.04 318.547 1370.17 545.191Z" fill="#CC915E"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M954.891 927.663C1168.99 930.372 1344.75 759.005 1347.46 544.904C1350.17 330.804 1178.8 155.045 964.7 152.336C750.599 149.628 574.841 320.994 572.132 535.095C569.423 749.195 740.79 924.954 954.891 927.663ZM954.603 950.375C1181.25 953.243 1367.3 771.836 1370.17 545.191C1373.04 318.547 1191.63 132.491 964.987 129.624C738.343 126.756 552.287 308.163 549.419 534.808C546.552 761.452 727.959 947.508 954.603 950.375Z" fill="#E8CA8F"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M1322 346.847C1349.35 398.034 1366.16 455.66 1369.56 516.788L550.745 506.429C555.691 445.406 573.954 388.223 602.595 337.745L1322 346.847ZM1041.97 137.825C1149.17 159.605 1240.99 223.093 1300.04 310.43L625.472 301.895C686.703 216.08 780.106 154.936 887.819 135.875L1041.97 137.825ZM1327.88 721.74C1353.15 670.633 1368.12 613.469 1370 552.933L549.393 542.551C549.747 603.116 563.256 660.64 587.234 712.369L1327.88 721.74ZM1307.82 757.626L606.373 748.751C651.955 825.757 722.019 886.66 805.988 920.616L1103.92 924.385C1188.72 892.565 1260.31 833.454 1307.82 757.626Z" fill="url(#paint1_radial_70:301)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M954.891 927.663C1168.99 930.372 1344.75 759.005 1347.46 544.904C1350.17 330.804 1178.8 155.045 964.7 152.336C750.599 149.628 574.841 320.994 572.132 535.095C569.423 749.195 740.79 924.954 954.891 927.663ZM954.603 950.375C1181.25 953.243 1367.3 771.836 1370.17 545.191C1373.04 318.547 1191.63 132.491 964.987 129.624C738.343 126.756 552.287 308.163 549.419 534.808C546.552 761.452 727.959 947.508 954.603 950.375Z" fill="#EED199"/>
<circle cx="912.564" cy="346.687" r="155.012" transform="rotate(0.724856 912.564 346.687)" fill="url(#paint2_linear_70:301)"/>
<circle cx="911.46" cy="331.039" r="150.453" transform="rotate(0.724856 911.46 331.039)" fill="url(#paint3_radial_70:301)"/>
<path d="M893.273 223.985L893.85 325.696L961.611 249.842L896.674 328.127L997.34 313.575L897.274 331.805L983.743 385.365L895.37 335.008L927.182 431.619L891.853 336.238L854.122 430.694L888.368 334.92L798.749 383.024L886.545 331.669L786.973 310.914L887.239 328.008L824.303 248.104L890.123 325.649L893.273 223.985Z" fill="url(#paint4_radial_70:301)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M894.543 278.41C893.467 280.686 891.276 281.908 889.65 281.14C888.024 280.371 887.578 277.903 888.654 275.626C889.73 273.35 891.921 272.127 893.547 272.896C895.173 273.665 895.619 276.133 894.543 278.41ZM846.271 308.019C847.897 308.788 850.088 307.566 851.164 305.289C852.24 303.013 851.794 300.544 850.168 299.776C848.542 299.007 846.351 300.229 845.275 302.506C844.199 304.782 844.645 307.251 846.271 308.019ZM937.147 308.568C937.115 311.086 935.632 313.109 933.833 313.086C932.035 313.063 930.603 311.004 930.635 308.486C930.666 305.968 932.15 303.945 933.949 303.968C935.747 303.991 937.179 306.05 937.147 308.568ZM866.606 362.184C868.252 364.09 868.482 366.588 867.121 367.763C865.76 368.939 863.322 368.347 861.677 366.441C860.031 364.536 859.8 362.038 861.161 360.862C862.523 359.687 864.96 360.279 866.606 362.184ZM935.807 391.15C937.433 391.919 939.624 390.697 940.7 388.42C941.776 386.144 941.33 383.675 939.704 382.907C938.078 382.138 935.887 383.36 934.811 385.637C933.735 387.913 934.181 390.382 935.807 391.15Z" fill="#6D5654"/>
<circle cx="1160.96" cy="559.91" r="155.012" transform="rotate(49.4373 1160.96 559.91)" fill="url(#paint5_linear_70:301)"/>
<circle cx="1171.99" cy="548.755" r="150.453" transform="rotate(49.4373 1171.99 548.755)" fill="url(#paint6_radial_70:301)"/>
<path d="M1240.43 464.452L1164.39 531.998L1266.1 532.862L1164.42 535.724L1241.78 601.764L1162.06 538.602L1178.87 638.916L1158.39 539.285L1106.79 626.936L1155.15 537.454L1059.28 571.428L1153.84 533.965L1058.56 498.366L1155.08 530.451L1104.97 441.936L1158.29 528.556L1176.8 428.542L1161.96 529.167L1240.43 464.452Z" fill="url(#paint7_radial_70:301)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M1200.38 501.315C1197.96 502.008 1195.59 501.169 1195.1 499.44C1194.6 497.711 1196.16 495.747 1198.58 495.054C1201 494.36 1203.37 495.2 1203.86 496.928C1204.36 498.657 1202.8 500.621 1200.38 501.315ZM1146.28 484.581C1146.77 486.31 1149.14 487.15 1151.56 486.456C1153.98 485.763 1155.54 483.799 1155.04 482.07C1154.55 480.341 1152.18 479.502 1149.76 480.195C1147.34 480.889 1145.78 482.853 1146.28 484.581ZM1205.83 553.23C1203.91 554.867 1201.42 555.087 1200.25 553.721C1199.08 552.354 1199.68 549.919 1201.59 548.282C1203.5 546.644 1206 546.425 1207.17 547.791C1208.34 549.157 1207.74 551.592 1205.83 553.23ZM1118.99 535.601C1118.65 538.095 1116.92 539.917 1115.14 539.67C1113.36 539.422 1112.2 537.2 1112.54 534.706C1112.89 532.212 1114.61 530.391 1116.39 530.638C1118.17 530.885 1119.34 533.107 1118.99 535.601ZM1142.89 606.714C1143.38 608.443 1145.75 609.282 1148.17 608.588C1150.59 607.895 1152.15 605.931 1151.65 604.202C1151.16 602.473 1148.8 601.634 1146.37 602.327C1143.95 603.021 1142.39 604.985 1142.89 606.714Z" fill="#6D5654"/>
<circle cx="796.471" cy="679.694" r="155.012" transform="rotate(-46.1779 796.471 679.694)" fill="url(#paint8_linear_70:301)"/>
<circle cx="784.292" cy="669.81" r="150.453" transform="rotate(-46.1779 784.292 669.81)" fill="url(#paint9_radial_70:301)"/>
<path d="M693.696 609.946L768.359 679.019L759.267 577.713L772.064 678.617L830.217 595.169L775.16 680.692L873.347 654.146L776.198 684.27L868.477 727.05L774.693 687.679L817.885 779.766L771.349 689.323L745.243 787.629L767.73 688.433L684.543 746.96L765.531 685.425L664.185 676.787L765.779 681.707L693.696 609.946Z" fill="url(#paint10_radial_70:301)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M734.3 646.202C735.227 648.543 734.623 650.978 732.951 651.64C731.278 652.302 729.171 650.941 728.244 648.6C727.317 646.259 727.921 643.824 729.593 643.162C731.265 642.5 733.373 643.861 734.3 646.202ZM722.941 701.679C724.613 701.017 725.217 698.582 724.29 696.241C723.363 693.9 721.256 692.539 719.584 693.201C717.912 693.863 717.308 696.298 718.235 698.639C719.162 700.98 721.269 702.341 722.941 701.679ZM785.434 635.698C787.25 637.441 787.713 639.907 786.468 641.204C785.223 642.502 782.74 642.14 780.924 640.397C779.107 638.653 778.644 636.188 779.889 634.89C781.135 633.593 783.617 633.954 785.434 635.698ZM776.385 723.841C778.901 723.941 780.883 725.479 780.811 727.277C780.74 729.074 778.642 730.449 776.126 730.349C773.61 730.249 771.629 728.71 771.7 726.913C771.772 725.116 773.87 723.741 776.385 723.841ZM844.82 693.101C846.492 692.439 847.096 690.005 846.169 687.663C845.242 685.322 843.135 683.961 841.463 684.624C839.791 685.286 839.186 687.72 840.114 690.062C841.041 692.403 843.148 693.764 844.82 693.101Z" fill="#6D5654"/>
<path d="M437.117 633.059C437.117 730.293 358.293 809.117 261.059 809.117C163.824 809.117 85 730.293 85 633.059C85 535.824 163.824 457 261.059 457C358.293 457 437.117 535.824 437.117 633.059Z" fill="#323138"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M261.059 798.182C352.254 798.182 426.182 724.254 426.182 633.059C426.182 541.864 352.254 467.935 261.059 467.935C169.864 467.935 95.9353 541.864 95.9353 633.059C95.9353 724.254 169.864 798.182 261.059 798.182ZM261.059 809.117C358.293 809.117 437.117 730.293 437.117 633.059C437.117 535.824 358.293 457 261.059 457C163.824 457 85 535.824 85 633.059C85 730.293 163.824 809.117 261.059 809.117Z" fill="url(#paint11_linear_70:301)"/>
<circle cx="261.059" cy="633.059" r="112.634" fill="#351F0D"/>
<circle cx="194" cy="690" r="6" fill="#503014"/>
<circle cx="186.281" cy="676.281" r="3.2806" fill="#503014"/>
<circle cx="324.281" cy="564.281" r="3.2806" fill="#503014"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M1650.7 140.307C1655.21 143.497 1656.28 149.738 1653.09 154.246L1647.89 161.592C1644.7 166.1 1638.46 167.168 1633.95 163.977L1614.36 150.111C1609.85 146.921 1608.78 140.68 1611.97 136.172L1617.17 128.826C1620.36 124.318 1626.61 123.25 1631.11 126.441L1650.7 140.307ZM1581.35 118.928C1580.76 113.436 1575.82 109.465 1570.33 110.057L1546.47 112.629C1540.98 113.221 1537.01 118.152 1537.6 123.643L1538.57 132.591C1539.16 138.082 1544.09 142.053 1549.58 141.462L1573.44 138.89C1578.93 138.298 1582.9 133.367 1582.31 127.876L1581.35 118.928ZM1591.05 189.04C1593.62 184.153 1591.75 178.106 1586.86 175.532L1565.63 164.348C1560.74 161.775 1554.69 163.65 1552.12 168.536L1547.93 176.499C1545.35 181.386 1547.23 187.433 1552.11 190.007L1573.35 201.191C1578.23 203.765 1584.28 201.89 1586.86 197.003L1591.05 189.04ZM1512.54 146.086C1518.03 145.494 1522.96 149.466 1523.55 154.957L1524.52 163.905C1525.11 169.396 1521.14 174.327 1515.65 174.919L1491.78 177.491C1486.29 178.083 1481.36 174.111 1480.77 168.62L1479.81 159.672C1479.21 154.181 1483.18 149.25 1488.68 148.658L1512.54 146.086ZM1620.06 214.923C1618.35 209.674 1612.7 206.811 1607.45 208.529L1584.64 215.994C1579.39 217.712 1576.53 223.36 1578.25 228.609L1581.05 237.162C1582.76 242.411 1588.41 245.274 1593.66 243.556L1616.47 236.091C1621.72 234.373 1624.58 228.725 1622.86 223.476L1620.06 214.923ZM1472.16 116.419C1468.33 112.438 1462 112.313 1458.02 116.141L1440.72 132.774C1436.74 136.602 1436.61 142.933 1440.44 146.914L1446.68 153.402C1450.51 157.383 1456.84 157.508 1460.82 153.68L1478.12 137.046C1482.1 133.219 1482.23 126.888 1478.4 122.907L1472.16 116.419ZM1440.98 204.004C1437.22 199.961 1437.45 193.634 1441.49 189.871L1448.08 183.739C1452.12 179.977 1458.45 180.204 1462.21 184.247L1478.56 201.815C1482.33 205.858 1482.1 212.186 1478.06 215.948L1471.47 222.08C1467.42 225.842 1461.1 225.615 1457.33 221.572L1440.98 204.004ZM1662.52 177.645C1657.17 176.286 1651.73 179.523 1650.37 184.876L1644.46 208.137C1643.1 213.49 1646.34 218.931 1651.69 220.291L1660.41 222.507C1665.76 223.867 1671.21 220.63 1672.57 215.277L1678.47 192.016C1679.83 186.663 1676.6 181.221 1671.24 179.861L1662.52 177.645ZM1541.15 210.153C1543.78 215.01 1541.98 221.079 1537.12 223.709L1529.21 227.994C1524.35 230.624 1518.28 228.819 1515.65 223.963L1504.22 202.859C1501.59 198.002 1503.4 191.933 1508.25 189.303L1516.17 185.018C1521.03 182.388 1527.09 184.193 1529.72 189.049L1541.15 210.153Z" fill="url(#paint12_linear_70:301)"/>
<path d="M1808.51 455.817C1810.14 453.735 1813.16 453.533 1815.26 455.364L1856.26 491.182C1858.35 493.013 1858.73 496.186 1857.1 498.267L1665.05 743.484C1663.42 745.566 1660.4 745.769 1658.3 743.937L1617.3 708.119C1615.2 706.288 1614.83 703.115 1616.46 701.034L1808.51 455.817Z" fill="url(#paint13_linear_70:301)"/>
<path d="M1811.31 300.309C1812.99 297.31 1816.27 296.035 1818.64 297.461L1864.91 325.353C1867.28 326.78 1867.84 330.367 1866.16 333.366L1668.39 686.646C1666.71 689.645 1663.43 690.92 1661.06 689.493L1614.79 661.601C1612.42 660.175 1611.86 656.588 1613.54 653.589L1811.31 300.309Z" fill="url(#paint14_linear_70:301)"/>
<path d="M1699.53 224.053C1700.02 221.12 1702.63 219.055 1705.37 219.441L1758.79 226.972C1761.52 227.357 1763.34 230.047 1762.85 232.979L1705.22 578.399C1704.73 581.331 1702.12 583.396 1699.38 583.011L1645.96 575.479C1643.23 575.094 1641.41 572.405 1641.9 569.472L1699.53 224.053Z" fill="url(#paint15_linear_70:301)"/>
<path d="M1625.92 299.275L1566.01 329.812C1565.51 330.068 1565.27 330.693 1565.48 331.221L1632.66 504.989C1640.93 526.367 1641.42 550.596 1634.05 573.112L1513 942.959C1507.23 960.586 1507.41 979.531 1513.49 996.448L1516.96 1006.1C1525.79 1030.64 1552.95 1040.7 1575.43 1027.75C1591.06 1018.74 1602.6 1003.16 1607.09 984.997L1715.82 544.932C1721.38 522.452 1719.29 498.969 1709.94 478.726L1627.22 299.729C1626.99 299.223 1626.41 299.023 1625.92 299.275Z" fill="url(#paint16_linear_70:301)"/>
<path d="M350.173 371.749C355.555 361.631 368.121 357.791 378.24 363.173C388.358 368.555 392.198 381.121 386.815 391.239C381.433 401.358 368.868 405.198 358.749 399.815C348.631 394.433 344.791 381.868 350.173 371.749Z" fill="url(#paint17_linear_70:301)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M377.383 364.784C368.154 359.875 356.693 363.377 351.784 372.606C346.875 381.835 350.377 393.296 359.606 398.205C368.835 403.114 380.296 399.612 385.205 390.383C390.114 381.154 386.612 369.693 377.383 364.784ZM378.24 363.173C368.121 357.791 355.555 361.631 350.173 371.749C344.791 381.868 348.631 394.433 358.749 399.815C368.868 405.198 381.433 401.358 386.815 391.239C392.198 381.121 388.358 368.555 378.24 363.173Z" fill="#E03F49"/>
<path d="M349.744 377.163L367.016 377.393L381.399 367.828L372.563 382.67L373.656 399.909L365.22 384.836L349.744 377.163Z" fill="#F9747C"/>
<circle cx="377.524" cy="383.479" r="1.69786" transform="rotate(-76.4303 377.524 383.479)" fill="#F3F4CB"/>
<circle cx="362.838" cy="387.572" r="1.71501" transform="rotate(41.5645 362.838 387.572)" fill="#F3F4CB"/>
<circle r="1.71501" transform="matrix(0.968474 -0.249115 -0.249115 -0.968474 366.047 374.277)" fill="#F3F4CB"/>
<circle cx="378.675" cy="389.968" r="1.69786" transform="rotate(-76.4303 378.675 389.968)" fill="#F3F4CB"/>
<circle cx="356.655" cy="385.757" r="1.71501" transform="rotate(41.5645 356.655 385.757)" fill="#F3F4CB"/>
<circle r="1.71501" transform="matrix(0.968474 -0.249115 -0.249115 -0.968474 359.716 373.073)" fill="#F3F4CB"/>
<circle cx="381.332" cy="378.964" r="1.69786" transform="rotate(-76.4303 381.332 378.964)" fill="#F3F4CB"/>
<circle cx="365.381" cy="393.493" r="1.71501" transform="rotate(41.5645 365.381 393.493)" fill="#F3F4CB"/>
<circle r="1.71501" transform="matrix(0.968474 -0.249115 -0.249115 -0.968474 371.011 370.168)" fill="#F3F4CB"/>
<path d="M387.173 432.749C392.555 422.631 405.121 418.791 415.24 424.173C425.358 429.555 429.198 442.121 423.815 452.239C418.433 462.358 405.868 466.198 395.749 460.815C385.631 455.433 381.791 442.868 387.173 432.749Z" fill="url(#paint18_linear_70:301)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M414.383 425.784C405.154 420.875 393.693 424.377 388.784 433.606C383.875 442.835 387.377 454.296 396.606 459.205C405.835 464.114 417.296 460.612 422.205 451.383C427.114 442.154 423.612 430.693 414.383 425.784ZM415.24 424.173C405.121 418.791 392.555 422.631 387.173 432.749C381.791 442.868 385.631 455.433 395.749 460.815C405.868 466.198 418.433 462.358 423.815 452.239C429.198 442.121 425.358 429.555 415.24 424.173Z" fill="#E03F49"/>
<path d="M386.744 438.163L404.016 438.393L418.399 428.828L409.563 443.67L410.656 460.909L402.22 445.836L386.744 438.163Z" fill="#F9747C"/>
<circle cx="414.524" cy="444.479" r="1.69786" transform="rotate(-76.4303 414.524 444.479)" fill="#F3F4CB"/>
<circle cx="399.838" cy="448.572" r="1.71501" transform="rotate(41.5645 399.838 448.572)" fill="#F3F4CB"/>
<circle r="1.71501" transform="matrix(0.968474 -0.249115 -0.249115 -0.968474 403.047 435.277)" fill="#F3F4CB"/>
<circle cx="415.675" cy="450.968" r="1.69786" transform="rotate(-76.4303 415.675 450.968)" fill="#F3F4CB"/>
<circle cx="393.655" cy="446.757" r="1.71501" transform="rotate(41.5645 393.655 446.757)" fill="#F3F4CB"/>
<circle r="1.71501" transform="matrix(0.968474 -0.249115 -0.249115 -0.968474 396.716 434.073)" fill="#F3F4CB"/>
<circle cx="418.332" cy="439.964" r="1.69786" transform="rotate(-76.4303 418.332 439.964)" fill="#F3F4CB"/>
<circle cx="402.381" cy="454.493" r="1.71501" transform="rotate(41.5645 402.381 454.493)" fill="#F3F4CB"/>
<circle r="1.71501" transform="matrix(0.968474 -0.249115 -0.249115 -0.968474 408.011 431.168)" fill="#F3F4CB"/>
<path d="M0.5 348V304.5L541 15L547.5 27.5L0.5 348Z" fill="url(#paint19_linear_70:301)"/>
<path d="M0.5 431.5V388L541 98.5L547.5 111L0.5 431.5Z" fill="url(#paint20_linear_70:301)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M507.493 259.249C506.982 257.751 505.353 256.951 503.855 257.462L470.746 268.76C469.248 269.271 468.448 270.9 468.959 272.398C469.47 273.896 471.099 274.696 472.597 274.185L505.706 262.887C507.204 262.376 508.004 260.747 507.493 259.249Z" fill="#323138"/>
<path d="M273.475 439.389L349.601 350.2C359.212 338.94 372.074 330.934 386.421 327.281L459.538 308.666C478.126 303.934 489.339 285.007 484.56 266.431C479.434 246.508 458.187 235.406 438.904 242.574L377.483 265.41C348.919 276.029 325.759 297.584 313.119 325.313L263.9 433.29C261.143 439.337 269.161 444.443 273.475 439.389Z" fill="url(#paint21_linear_70:301)"/>
<path d="M520.559 839.386L437.985 824.982C421.646 822.132 406.095 833.081 403.268 849.424L393.383 906.584L389.427 920.951C378.807 959.526 409.012 997.201 448.973 995.223C462.155 994.57 474.158 987.43 481.023 976.157L483.779 971.63L487.289 971.138C500.584 969.273 512.058 960.862 517.837 948.744L521.316 941.448L534.237 938.889C545.258 936.706 554.763 929.598 560.046 919.682C577.736 886.482 557.702 845.345 520.559 839.386Z" fill="url(#paint22_linear_70:301)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M403.115 849.566L403.247 848.805C403.381 848.03 403.544 847.268 403.733 846.519C406.512 851.346 408.485 856.604 409.567 862.085L422.809 929.184C425.868 944.685 436.213 957.759 450.594 964.3L479.7 977.538C479.31 978.099 478.908 978.649 478.492 979.186L449.766 966.121C434.798 959.312 424.031 945.705 420.847 929.572L407.605 862.472C406.716 857.972 405.203 853.629 403.115 849.566ZM462.257 991.607C463.081 991.265 463.892 990.896 464.69 990.5L432.714 976.292C414.867 968.362 403.433 950.592 403.612 931.064L404.17 870.158C404.216 865.119 403.515 860.132 402.115 855.352L401.261 860.287C401.893 863.516 402.2 866.816 402.17 870.139L401.612 931.046C401.426 951.371 413.327 969.866 431.901 978.12L462.257 991.607ZM486.493 970.628L461.311 954.101C452.279 948.174 445.363 939.532 441.559 929.42L417.127 864.476C416.029 861.557 414.655 858.749 413.023 856.091L404.908 842.874C405.207 842.116 405.535 841.375 405.891 840.652L414.728 855.045C416.426 857.811 417.856 860.733 418.999 863.772L443.431 928.716C447.086 938.431 453.731 946.734 462.408 952.429L489.421 970.157C488.709 970.297 487.991 970.417 487.267 970.519L486.493 970.628ZM498.421 967.25L407.961 837.093C408.357 836.508 408.774 835.938 409.209 835.385L500.237 966.359C499.639 966.671 499.034 966.968 498.421 967.25ZM514.444 953.898L423.24 825.478C423.906 825.253 424.581 825.051 425.264 824.873L515.629 952.111C515.249 952.719 514.854 953.314 514.444 953.898ZM521.922 940.705L516.077 916.28C513.661 906.185 508.103 897.119 500.202 890.387L447.387 845.384C444.917 843.279 442.652 840.942 440.626 838.406L429.211 824.125C430.007 824.03 430.81 823.966 431.619 823.934L442.188 837.158C444.135 839.594 446.311 841.839 448.685 843.862L501.5 888.865C509.722 895.871 515.508 905.308 518.022 915.814L523.885 940.316L521.922 940.705ZM533.62 938.388L531.25 909.19C529.972 893.443 521.18 879.278 507.635 871.145L448.999 835.938C443.784 832.807 439.177 828.771 435.39 824.027C436.244 824.101 437.103 824.213 437.963 824.363L438.328 824.427C441.687 828.277 445.633 831.584 450.028 834.223L508.664 869.43C522.762 877.895 531.913 892.638 533.244 909.029L535.593 937.97C535.136 938.078 534.677 938.178 534.216 938.27L533.62 938.388ZM551.035 930.169L548.594 896.434C547.185 876.956 534.344 860.175 515.912 853.722L458.423 833.598C452.974 831.69 447.92 828.883 443.458 825.322L447.887 826.094C451.344 828.425 455.104 830.317 459.084 831.71L516.572 851.835C535.757 858.55 549.122 876.017 550.589 896.29L552.918 928.472C552.309 929.059 551.681 929.625 551.035 930.169Z" fill="#D1C0AF"/>
<path d="M332.664 870.394L303.299 889.402L297.026 893.238C269.22 910.242 260.073 946.335 276.426 974.529L282.023 984.181C289.965 997.873 309.911 997.351 317.126 983.262L320.313 977.038C331.449 955.29 339.199 931.969 343.295 907.881L347.957 880.465C349.416 871.882 339.972 865.663 332.664 870.394Z" fill="#F5E1AE"/>
</g>
<defs>
<linearGradient id="paint0_linear_70:301" x1="1346.74" y1="1091.12" x2="627.885" y2="86.6374" gradientUnits="userSpaceOnUse">
<stop stop-color="#C0793C"/>
<stop offset="1" stop-color="#EBB484"/>
</linearGradient>
<radialGradient id="paint1_radial_70:301" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(960.161 551.878) rotate(90.7249) scale(370.658 387.151)">
<stop stop-color="#F1D49A"/>
<stop offset="1" stop-color="#DF9D64"/>
</radialGradient>
<linearGradient id="paint2_linear_70:301" x1="934.709" y1="688.144" x2="942.209" y2="288.146" gradientUnits="userSpaceOnUse">
<stop stop-color="#CFB996"/>
<stop offset="1" stop-color="#EEEDDF"/>
</linearGradient>
<radialGradient id="paint3_radial_70:301" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(911.46 331.039) rotate(90) scale(171.62)">
<stop stop-color="white"/>
<stop offset="0.564807" stop-color="#EDEBDB"/>
<stop offset="0.951323" stop-color="#E2DAC5"/>
</radialGradient>
<radialGradient id="paint4_radial_70:301" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(891.921 330.791) rotate(86.2482) scale(91.7891)">
<stop stop-color="#E0D8C2"/>
<stop offset="1" stop-color="#E0D8C2" stop-opacity="0"/>
</radialGradient>
<linearGradient id="paint5_linear_70:301" x1="1183.11" y1="901.368" x2="1190.61" y2="501.37" gradientUnits="userSpaceOnUse">
<stop stop-color="#CFB996"/>
<stop offset="1" stop-color="#EEEDDF"/>
</linearGradient>
<radialGradient id="paint6_radial_70:301" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1171.99 548.754) rotate(90) scale(171.62)">
<stop stop-color="white"/>
<stop offset="0.564807" stop-color="#EDEBDB"/>
<stop offset="0.951323" stop-color="#E2DAC5"/>
</radialGradient>
<radialGradient id="paint7_radial_70:301" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1159.29 533.911) rotate(134.961) scale(91.7891)">
<stop stop-color="#E0D8C2"/>
<stop offset="1" stop-color="#E0D8C2" stop-opacity="0"/>
</radialGradient>
<linearGradient id="paint8_linear_70:301" x1="818.615" y1="1021.15" x2="826.115" y2="621.153" gradientUnits="userSpaceOnUse">
<stop stop-color="#CFB996"/>
<stop offset="1" stop-color="#EEEDDF"/>
</linearGradient>
<radialGradient id="paint9_radial_70:301" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(784.292 669.81) rotate(90) scale(171.62)">
<stop stop-color="white"/>
<stop offset="0.564807" stop-color="#EDEBDB"/>
<stop offset="0.951323" stop-color="#E2DAC5"/>
</radialGradient>
<radialGradient id="paint10_radial_70:301" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(770.762 683.907) rotate(39.3454) scale(91.7891)">
<stop stop-color="#E0D8C2"/>
<stop offset="1" stop-color="#E0D8C2" stop-opacity="0"/>
</radialGradient>
<linearGradient id="paint11_linear_70:301" x1="261.059" y1="457" x2="261.059" y2="809.117" gradientUnits="userSpaceOnUse">
<stop stop-color="#64626F"/>
<stop offset="1" stop-color="#64626F" stop-opacity="0.34"/>
</linearGradient>
<linearGradient id="paint12_linear_70:301" x1="1626.03" y1="309.134" x2="1428.41" y2="142.436" gradientUnits="userSpaceOnUse">
<stop stop-color="#80D78C"/>
<stop offset="1" stop-color="#61B078"/>
</linearGradient>
<linearGradient id="paint13_linear_70:301" x1="1945.63" y1="448.003" x2="2010.32" y2="697.667" gradientUnits="userSpaceOnUse">
<stop stop-color="#64B581"/>
<stop offset="0.741777" stop-color="#C8E797"/>
<stop offset="0.974604" stop-color="#E3EBB4"/>
</linearGradient>
<linearGradient id="paint14_linear_70:301" x1="1828.13" y1="329.092" x2="1953.37" y2="482.122" gradientUnits="userSpaceOnUse">
<stop stop-color="#64B581"/>
<stop offset="0.741777" stop-color="#C8E797"/>
<stop offset="0.974604" stop-color="#E3EBB4"/>
</linearGradient>
<linearGradient id="paint15_linear_70:301" x1="1718.04" y1="294.069" x2="1852.11" y2="376.607" gradientUnits="userSpaceOnUse">
<stop stop-color="#64B581"/>
<stop offset="0.782584" stop-color="#C8E797"/>
<stop offset="0.974604" stop-color="#E3EBB4"/>
</linearGradient>
<linearGradient id="paint16_linear_70:301" x1="1672.52" y1="354.643" x2="1924.43" y2="640.534" gradientUnits="userSpaceOnUse">
<stop stop-color="#64B581"/>
<stop offset="0.782584" stop-color="#C8E797"/>
<stop offset="0.974604" stop-color="#E3EBB4"/>
</linearGradient>
<linearGradient id="paint17_linear_70:301" x1="362.582" y1="406.441" x2="364.596" y2="360.98" gradientUnits="userSpaceOnUse">
<stop stop-color="#E23B45"/>
<stop offset="1" stop-color="#F4616A"/>
</linearGradient>
<linearGradient id="paint18_linear_70:301" x1="399.582" y1="467.441" x2="401.596" y2="421.98" gradientUnits="userSpaceOnUse">
<stop stop-color="#E23B45"/>
<stop offset="1" stop-color="#F4616A"/>
</linearGradient>
<linearGradient id="paint19_linear_70:301" x1="660.5" y1="-78" x2="414.924" y2="563.499" gradientUnits="userSpaceOnUse">
<stop offset="0.186406" stop-color="#F7E0C7"/>
<stop offset="0.93046" stop-color="#EEC8A1"/>
</linearGradient>
<linearGradient id="paint20_linear_70:301" x1="660.5" y1="5.49999" x2="414.924" y2="646.999" gradientUnits="userSpaceOnUse">
<stop offset="0.186406" stop-color="#F7E0C7"/>
<stop offset="0.93046" stop-color="#EEC8A1"/>
</linearGradient>
<linearGradient id="paint21_linear_70:301" x1="394.043" y1="292.256" x2="499.916" y2="337.304" gradientUnits="userSpaceOnUse">
<stop stop-color="#D55561"/>
<stop offset="1" stop-color="#EB8B75"/>
</linearGradient>
<linearGradient id="paint22_linear_70:301" x1="463.261" y1="895.519" x2="549.986" y2="1018.91" gradientUnits="userSpaceOnUse">
<stop stop-color="#F5E6D5"/>
<stop offset="1" stop-color="#DFD1C2"/>
</linearGradient>
<clipPath id="clip0_70:301">
<rect width="1920" height="1080" fill="white"/>
</clipPath>
</defs>
</svg>
有趣的是,如果我用鼠标左键按下 svg 并使用 'Open image in new tab',所有浏览器都会显示正确的 .svg 文件。
Chromium-based 浏览器似乎对 Firefox 的 XML 语法表现出不同的遵从性。实际上,应该避免在 svg id 中使用冒号 :
。在 svg 的源代码中,您可以在 id 中看到一个冒号,例如:
id="paint0_linear_70:301"
冒号会导致 Chromium-based 浏览器出现渲染问题。您可以简单地删除所有这些冒号来解决问题。请确保您遵守 XML 文档,并且不要忘记对引用此 id 的代码进行相同的修改,例如:
fill="url(#paint0_linear_70:301)"
关于svg id的更多信息,您可以阅读this doc and 。
我如何导入 .svg 文件:
import khinkali from "./imgs/khinkali.svg";
import fritters from "./imgs/fritters.svg";
import kebab from "./imgs/kebab.svg";
import pancakes from "./imgs/pancakes.svg";
import omurice from "./imgs/omurice.svg";
我以后如何使用它们(我将 src 作为 prop 传递):
<img src={src} alt="Food icon" style={{ width: 300 }} />
<svg viewBox="0 0 1920 1080" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_70:301)">
<rect width="1920" height="1080" fill="#EDEBDB"/>
<path d="M1920 1080V211L285 633L513 1080H1920Z" fill="#E8C978"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M1814.97 238.107L1920 439.846V511.417L1782.13 246.585L1814.97 238.107ZM1593.62 295.241L1920 913.365V984.147L1560.73 303.73L1593.62 295.241ZM1370.83 352.742L1737.96 1080H1700.94L1338.08 361.196L1370.83 352.742ZM1096.29 423.603L1444.23 1080H1406.82L1063.39 432.095L1096.29 423.603ZM857.622 485.204L1149.19 1080H1112.38L824.948 493.637L857.622 485.204ZM572.166 558.881L832.726 1080H795.775L539.439 567.328L572.166 558.881Z" fill="#EAD18F"/>
<path d="M1420.76 545.831C1417.54 800.414 1208.55 1004.18 953.963 1000.96C699.38 997.741 495.611 788.75 498.832 534.167C502.053 279.584 711.044 75.8152 965.627 79.0361C1220.21 82.257 1423.98 291.248 1420.76 545.831Z" fill="url(#paint0_linear_70:301)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M499.414 529.012L1420.31 540.663L1419.98 566.472L499.087 554.822L499.414 529.012Z" fill="#C2844C"/>
<path d="M1370.17 545.191C1367.3 771.836 1181.25 953.243 954.603 950.375C727.959 947.508 546.552 761.452 549.419 534.808C552.287 308.163 738.343 126.756 964.987 129.624C1191.63 132.491 1373.04 318.547 1370.17 545.191Z" fill="#CC915E"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M954.891 927.663C1168.99 930.372 1344.75 759.005 1347.46 544.904C1350.17 330.804 1178.8 155.045 964.7 152.336C750.599 149.628 574.841 320.994 572.132 535.095C569.423 749.195 740.79 924.954 954.891 927.663ZM954.603 950.375C1181.25 953.243 1367.3 771.836 1370.17 545.191C1373.04 318.547 1191.63 132.491 964.987 129.624C738.343 126.756 552.287 308.163 549.419 534.808C546.552 761.452 727.959 947.508 954.603 950.375Z" fill="#E8CA8F"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M1322 346.847C1349.35 398.034 1366.16 455.66 1369.56 516.788L550.745 506.429C555.691 445.406 573.954 388.223 602.595 337.745L1322 346.847ZM1041.97 137.825C1149.17 159.605 1240.99 223.093 1300.04 310.43L625.472 301.895C686.703 216.08 780.106 154.936 887.819 135.875L1041.97 137.825ZM1327.88 721.74C1353.15 670.633 1368.12 613.469 1370 552.933L549.393 542.551C549.747 603.116 563.256 660.64 587.234 712.369L1327.88 721.74ZM1307.82 757.626L606.373 748.751C651.955 825.757 722.019 886.66 805.988 920.616L1103.92 924.385C1188.72 892.565 1260.31 833.454 1307.82 757.626Z" fill="url(#paint1_radial_70:301)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M954.891 927.663C1168.99 930.372 1344.75 759.005 1347.46 544.904C1350.17 330.804 1178.8 155.045 964.7 152.336C750.599 149.628 574.841 320.994 572.132 535.095C569.423 749.195 740.79 924.954 954.891 927.663ZM954.603 950.375C1181.25 953.243 1367.3 771.836 1370.17 545.191C1373.04 318.547 1191.63 132.491 964.987 129.624C738.343 126.756 552.287 308.163 549.419 534.808C546.552 761.452 727.959 947.508 954.603 950.375Z" fill="#EED199"/>
<circle cx="912.564" cy="346.687" r="155.012" transform="rotate(0.724856 912.564 346.687)" fill="url(#paint2_linear_70:301)"/>
<circle cx="911.46" cy="331.039" r="150.453" transform="rotate(0.724856 911.46 331.039)" fill="url(#paint3_radial_70:301)"/>
<path d="M893.273 223.985L893.85 325.696L961.611 249.842L896.674 328.127L997.34 313.575L897.274 331.805L983.743 385.365L895.37 335.008L927.182 431.619L891.853 336.238L854.122 430.694L888.368 334.92L798.749 383.024L886.545 331.669L786.973 310.914L887.239 328.008L824.303 248.104L890.123 325.649L893.273 223.985Z" fill="url(#paint4_radial_70:301)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M894.543 278.41C893.467 280.686 891.276 281.908 889.65 281.14C888.024 280.371 887.578 277.903 888.654 275.626C889.73 273.35 891.921 272.127 893.547 272.896C895.173 273.665 895.619 276.133 894.543 278.41ZM846.271 308.019C847.897 308.788 850.088 307.566 851.164 305.289C852.24 303.013 851.794 300.544 850.168 299.776C848.542 299.007 846.351 300.229 845.275 302.506C844.199 304.782 844.645 307.251 846.271 308.019ZM937.147 308.568C937.115 311.086 935.632 313.109 933.833 313.086C932.035 313.063 930.603 311.004 930.635 308.486C930.666 305.968 932.15 303.945 933.949 303.968C935.747 303.991 937.179 306.05 937.147 308.568ZM866.606 362.184C868.252 364.09 868.482 366.588 867.121 367.763C865.76 368.939 863.322 368.347 861.677 366.441C860.031 364.536 859.8 362.038 861.161 360.862C862.523 359.687 864.96 360.279 866.606 362.184ZM935.807 391.15C937.433 391.919 939.624 390.697 940.7 388.42C941.776 386.144 941.33 383.675 939.704 382.907C938.078 382.138 935.887 383.36 934.811 385.637C933.735 387.913 934.181 390.382 935.807 391.15Z" fill="#6D5654"/>
<circle cx="1160.96" cy="559.91" r="155.012" transform="rotate(49.4373 1160.96 559.91)" fill="url(#paint5_linear_70:301)"/>
<circle cx="1171.99" cy="548.755" r="150.453" transform="rotate(49.4373 1171.99 548.755)" fill="url(#paint6_radial_70:301)"/>
<path d="M1240.43 464.452L1164.39 531.998L1266.1 532.862L1164.42 535.724L1241.78 601.764L1162.06 538.602L1178.87 638.916L1158.39 539.285L1106.79 626.936L1155.15 537.454L1059.28 571.428L1153.84 533.965L1058.56 498.366L1155.08 530.451L1104.97 441.936L1158.29 528.556L1176.8 428.542L1161.96 529.167L1240.43 464.452Z" fill="url(#paint7_radial_70:301)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M1200.38 501.315C1197.96 502.008 1195.59 501.169 1195.1 499.44C1194.6 497.711 1196.16 495.747 1198.58 495.054C1201 494.36 1203.37 495.2 1203.86 496.928C1204.36 498.657 1202.8 500.621 1200.38 501.315ZM1146.28 484.581C1146.77 486.31 1149.14 487.15 1151.56 486.456C1153.98 485.763 1155.54 483.799 1155.04 482.07C1154.55 480.341 1152.18 479.502 1149.76 480.195C1147.34 480.889 1145.78 482.853 1146.28 484.581ZM1205.83 553.23C1203.91 554.867 1201.42 555.087 1200.25 553.721C1199.08 552.354 1199.68 549.919 1201.59 548.282C1203.5 546.644 1206 546.425 1207.17 547.791C1208.34 549.157 1207.74 551.592 1205.83 553.23ZM1118.99 535.601C1118.65 538.095 1116.92 539.917 1115.14 539.67C1113.36 539.422 1112.2 537.2 1112.54 534.706C1112.89 532.212 1114.61 530.391 1116.39 530.638C1118.17 530.885 1119.34 533.107 1118.99 535.601ZM1142.89 606.714C1143.38 608.443 1145.75 609.282 1148.17 608.588C1150.59 607.895 1152.15 605.931 1151.65 604.202C1151.16 602.473 1148.8 601.634 1146.37 602.327C1143.95 603.021 1142.39 604.985 1142.89 606.714Z" fill="#6D5654"/>
<circle cx="796.471" cy="679.694" r="155.012" transform="rotate(-46.1779 796.471 679.694)" fill="url(#paint8_linear_70:301)"/>
<circle cx="784.292" cy="669.81" r="150.453" transform="rotate(-46.1779 784.292 669.81)" fill="url(#paint9_radial_70:301)"/>
<path d="M693.696 609.946L768.359 679.019L759.267 577.713L772.064 678.617L830.217 595.169L775.16 680.692L873.347 654.146L776.198 684.27L868.477 727.05L774.693 687.679L817.885 779.766L771.349 689.323L745.243 787.629L767.73 688.433L684.543 746.96L765.531 685.425L664.185 676.787L765.779 681.707L693.696 609.946Z" fill="url(#paint10_radial_70:301)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M734.3 646.202C735.227 648.543 734.623 650.978 732.951 651.64C731.278 652.302 729.171 650.941 728.244 648.6C727.317 646.259 727.921 643.824 729.593 643.162C731.265 642.5 733.373 643.861 734.3 646.202ZM722.941 701.679C724.613 701.017 725.217 698.582 724.29 696.241C723.363 693.9 721.256 692.539 719.584 693.201C717.912 693.863 717.308 696.298 718.235 698.639C719.162 700.98 721.269 702.341 722.941 701.679ZM785.434 635.698C787.25 637.441 787.713 639.907 786.468 641.204C785.223 642.502 782.74 642.14 780.924 640.397C779.107 638.653 778.644 636.188 779.889 634.89C781.135 633.593 783.617 633.954 785.434 635.698ZM776.385 723.841C778.901 723.941 780.883 725.479 780.811 727.277C780.74 729.074 778.642 730.449 776.126 730.349C773.61 730.249 771.629 728.71 771.7 726.913C771.772 725.116 773.87 723.741 776.385 723.841ZM844.82 693.101C846.492 692.439 847.096 690.005 846.169 687.663C845.242 685.322 843.135 683.961 841.463 684.624C839.791 685.286 839.186 687.72 840.114 690.062C841.041 692.403 843.148 693.764 844.82 693.101Z" fill="#6D5654"/>
<path d="M437.117 633.059C437.117 730.293 358.293 809.117 261.059 809.117C163.824 809.117 85 730.293 85 633.059C85 535.824 163.824 457 261.059 457C358.293 457 437.117 535.824 437.117 633.059Z" fill="#323138"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M261.059 798.182C352.254 798.182 426.182 724.254 426.182 633.059C426.182 541.864 352.254 467.935 261.059 467.935C169.864 467.935 95.9353 541.864 95.9353 633.059C95.9353 724.254 169.864 798.182 261.059 798.182ZM261.059 809.117C358.293 809.117 437.117 730.293 437.117 633.059C437.117 535.824 358.293 457 261.059 457C163.824 457 85 535.824 85 633.059C85 730.293 163.824 809.117 261.059 809.117Z" fill="url(#paint11_linear_70:301)"/>
<circle cx="261.059" cy="633.059" r="112.634" fill="#351F0D"/>
<circle cx="194" cy="690" r="6" fill="#503014"/>
<circle cx="186.281" cy="676.281" r="3.2806" fill="#503014"/>
<circle cx="324.281" cy="564.281" r="3.2806" fill="#503014"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M1650.7 140.307C1655.21 143.497 1656.28 149.738 1653.09 154.246L1647.89 161.592C1644.7 166.1 1638.46 167.168 1633.95 163.977L1614.36 150.111C1609.85 146.921 1608.78 140.68 1611.97 136.172L1617.17 128.826C1620.36 124.318 1626.61 123.25 1631.11 126.441L1650.7 140.307ZM1581.35 118.928C1580.76 113.436 1575.82 109.465 1570.33 110.057L1546.47 112.629C1540.98 113.221 1537.01 118.152 1537.6 123.643L1538.57 132.591C1539.16 138.082 1544.09 142.053 1549.58 141.462L1573.44 138.89C1578.93 138.298 1582.9 133.367 1582.31 127.876L1581.35 118.928ZM1591.05 189.04C1593.62 184.153 1591.75 178.106 1586.86 175.532L1565.63 164.348C1560.74 161.775 1554.69 163.65 1552.12 168.536L1547.93 176.499C1545.35 181.386 1547.23 187.433 1552.11 190.007L1573.35 201.191C1578.23 203.765 1584.28 201.89 1586.86 197.003L1591.05 189.04ZM1512.54 146.086C1518.03 145.494 1522.96 149.466 1523.55 154.957L1524.52 163.905C1525.11 169.396 1521.14 174.327 1515.65 174.919L1491.78 177.491C1486.29 178.083 1481.36 174.111 1480.77 168.62L1479.81 159.672C1479.21 154.181 1483.18 149.25 1488.68 148.658L1512.54 146.086ZM1620.06 214.923C1618.35 209.674 1612.7 206.811 1607.45 208.529L1584.64 215.994C1579.39 217.712 1576.53 223.36 1578.25 228.609L1581.05 237.162C1582.76 242.411 1588.41 245.274 1593.66 243.556L1616.47 236.091C1621.72 234.373 1624.58 228.725 1622.86 223.476L1620.06 214.923ZM1472.16 116.419C1468.33 112.438 1462 112.313 1458.02 116.141L1440.72 132.774C1436.74 136.602 1436.61 142.933 1440.44 146.914L1446.68 153.402C1450.51 157.383 1456.84 157.508 1460.82 153.68L1478.12 137.046C1482.1 133.219 1482.23 126.888 1478.4 122.907L1472.16 116.419ZM1440.98 204.004C1437.22 199.961 1437.45 193.634 1441.49 189.871L1448.08 183.739C1452.12 179.977 1458.45 180.204 1462.21 184.247L1478.56 201.815C1482.33 205.858 1482.1 212.186 1478.06 215.948L1471.47 222.08C1467.42 225.842 1461.1 225.615 1457.33 221.572L1440.98 204.004ZM1662.52 177.645C1657.17 176.286 1651.73 179.523 1650.37 184.876L1644.46 208.137C1643.1 213.49 1646.34 218.931 1651.69 220.291L1660.41 222.507C1665.76 223.867 1671.21 220.63 1672.57 215.277L1678.47 192.016C1679.83 186.663 1676.6 181.221 1671.24 179.861L1662.52 177.645ZM1541.15 210.153C1543.78 215.01 1541.98 221.079 1537.12 223.709L1529.21 227.994C1524.35 230.624 1518.28 228.819 1515.65 223.963L1504.22 202.859C1501.59 198.002 1503.4 191.933 1508.25 189.303L1516.17 185.018C1521.03 182.388 1527.09 184.193 1529.72 189.049L1541.15 210.153Z" fill="url(#paint12_linear_70:301)"/>
<path d="M1808.51 455.817C1810.14 453.735 1813.16 453.533 1815.26 455.364L1856.26 491.182C1858.35 493.013 1858.73 496.186 1857.1 498.267L1665.05 743.484C1663.42 745.566 1660.4 745.769 1658.3 743.937L1617.3 708.119C1615.2 706.288 1614.83 703.115 1616.46 701.034L1808.51 455.817Z" fill="url(#paint13_linear_70:301)"/>
<path d="M1811.31 300.309C1812.99 297.31 1816.27 296.035 1818.64 297.461L1864.91 325.353C1867.28 326.78 1867.84 330.367 1866.16 333.366L1668.39 686.646C1666.71 689.645 1663.43 690.92 1661.06 689.493L1614.79 661.601C1612.42 660.175 1611.86 656.588 1613.54 653.589L1811.31 300.309Z" fill="url(#paint14_linear_70:301)"/>
<path d="M1699.53 224.053C1700.02 221.12 1702.63 219.055 1705.37 219.441L1758.79 226.972C1761.52 227.357 1763.34 230.047 1762.85 232.979L1705.22 578.399C1704.73 581.331 1702.12 583.396 1699.38 583.011L1645.96 575.479C1643.23 575.094 1641.41 572.405 1641.9 569.472L1699.53 224.053Z" fill="url(#paint15_linear_70:301)"/>
<path d="M1625.92 299.275L1566.01 329.812C1565.51 330.068 1565.27 330.693 1565.48 331.221L1632.66 504.989C1640.93 526.367 1641.42 550.596 1634.05 573.112L1513 942.959C1507.23 960.586 1507.41 979.531 1513.49 996.448L1516.96 1006.1C1525.79 1030.64 1552.95 1040.7 1575.43 1027.75C1591.06 1018.74 1602.6 1003.16 1607.09 984.997L1715.82 544.932C1721.38 522.452 1719.29 498.969 1709.94 478.726L1627.22 299.729C1626.99 299.223 1626.41 299.023 1625.92 299.275Z" fill="url(#paint16_linear_70:301)"/>
<path d="M350.173 371.749C355.555 361.631 368.121 357.791 378.24 363.173C388.358 368.555 392.198 381.121 386.815 391.239C381.433 401.358 368.868 405.198 358.749 399.815C348.631 394.433 344.791 381.868 350.173 371.749Z" fill="url(#paint17_linear_70:301)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M377.383 364.784C368.154 359.875 356.693 363.377 351.784 372.606C346.875 381.835 350.377 393.296 359.606 398.205C368.835 403.114 380.296 399.612 385.205 390.383C390.114 381.154 386.612 369.693 377.383 364.784ZM378.24 363.173C368.121 357.791 355.555 361.631 350.173 371.749C344.791 381.868 348.631 394.433 358.749 399.815C368.868 405.198 381.433 401.358 386.815 391.239C392.198 381.121 388.358 368.555 378.24 363.173Z" fill="#E03F49"/>
<path d="M349.744 377.163L367.016 377.393L381.399 367.828L372.563 382.67L373.656 399.909L365.22 384.836L349.744 377.163Z" fill="#F9747C"/>
<circle cx="377.524" cy="383.479" r="1.69786" transform="rotate(-76.4303 377.524 383.479)" fill="#F3F4CB"/>
<circle cx="362.838" cy="387.572" r="1.71501" transform="rotate(41.5645 362.838 387.572)" fill="#F3F4CB"/>
<circle r="1.71501" transform="matrix(0.968474 -0.249115 -0.249115 -0.968474 366.047 374.277)" fill="#F3F4CB"/>
<circle cx="378.675" cy="389.968" r="1.69786" transform="rotate(-76.4303 378.675 389.968)" fill="#F3F4CB"/>
<circle cx="356.655" cy="385.757" r="1.71501" transform="rotate(41.5645 356.655 385.757)" fill="#F3F4CB"/>
<circle r="1.71501" transform="matrix(0.968474 -0.249115 -0.249115 -0.968474 359.716 373.073)" fill="#F3F4CB"/>
<circle cx="381.332" cy="378.964" r="1.69786" transform="rotate(-76.4303 381.332 378.964)" fill="#F3F4CB"/>
<circle cx="365.381" cy="393.493" r="1.71501" transform="rotate(41.5645 365.381 393.493)" fill="#F3F4CB"/>
<circle r="1.71501" transform="matrix(0.968474 -0.249115 -0.249115 -0.968474 371.011 370.168)" fill="#F3F4CB"/>
<path d="M387.173 432.749C392.555 422.631 405.121 418.791 415.24 424.173C425.358 429.555 429.198 442.121 423.815 452.239C418.433 462.358 405.868 466.198 395.749 460.815C385.631 455.433 381.791 442.868 387.173 432.749Z" fill="url(#paint18_linear_70:301)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M414.383 425.784C405.154 420.875 393.693 424.377 388.784 433.606C383.875 442.835 387.377 454.296 396.606 459.205C405.835 464.114 417.296 460.612 422.205 451.383C427.114 442.154 423.612 430.693 414.383 425.784ZM415.24 424.173C405.121 418.791 392.555 422.631 387.173 432.749C381.791 442.868 385.631 455.433 395.749 460.815C405.868 466.198 418.433 462.358 423.815 452.239C429.198 442.121 425.358 429.555 415.24 424.173Z" fill="#E03F49"/>
<path d="M386.744 438.163L404.016 438.393L418.399 428.828L409.563 443.67L410.656 460.909L402.22 445.836L386.744 438.163Z" fill="#F9747C"/>
<circle cx="414.524" cy="444.479" r="1.69786" transform="rotate(-76.4303 414.524 444.479)" fill="#F3F4CB"/>
<circle cx="399.838" cy="448.572" r="1.71501" transform="rotate(41.5645 399.838 448.572)" fill="#F3F4CB"/>
<circle r="1.71501" transform="matrix(0.968474 -0.249115 -0.249115 -0.968474 403.047 435.277)" fill="#F3F4CB"/>
<circle cx="415.675" cy="450.968" r="1.69786" transform="rotate(-76.4303 415.675 450.968)" fill="#F3F4CB"/>
<circle cx="393.655" cy="446.757" r="1.71501" transform="rotate(41.5645 393.655 446.757)" fill="#F3F4CB"/>
<circle r="1.71501" transform="matrix(0.968474 -0.249115 -0.249115 -0.968474 396.716 434.073)" fill="#F3F4CB"/>
<circle cx="418.332" cy="439.964" r="1.69786" transform="rotate(-76.4303 418.332 439.964)" fill="#F3F4CB"/>
<circle cx="402.381" cy="454.493" r="1.71501" transform="rotate(41.5645 402.381 454.493)" fill="#F3F4CB"/>
<circle r="1.71501" transform="matrix(0.968474 -0.249115 -0.249115 -0.968474 408.011 431.168)" fill="#F3F4CB"/>
<path d="M0.5 348V304.5L541 15L547.5 27.5L0.5 348Z" fill="url(#paint19_linear_70:301)"/>
<path d="M0.5 431.5V388L541 98.5L547.5 111L0.5 431.5Z" fill="url(#paint20_linear_70:301)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M507.493 259.249C506.982 257.751 505.353 256.951 503.855 257.462L470.746 268.76C469.248 269.271 468.448 270.9 468.959 272.398C469.47 273.896 471.099 274.696 472.597 274.185L505.706 262.887C507.204 262.376 508.004 260.747 507.493 259.249Z" fill="#323138"/>
<path d="M273.475 439.389L349.601 350.2C359.212 338.94 372.074 330.934 386.421 327.281L459.538 308.666C478.126 303.934 489.339 285.007 484.56 266.431C479.434 246.508 458.187 235.406 438.904 242.574L377.483 265.41C348.919 276.029 325.759 297.584 313.119 325.313L263.9 433.29C261.143 439.337 269.161 444.443 273.475 439.389Z" fill="url(#paint21_linear_70:301)"/>
<path d="M520.559 839.386L437.985 824.982C421.646 822.132 406.095 833.081 403.268 849.424L393.383 906.584L389.427 920.951C378.807 959.526 409.012 997.201 448.973 995.223C462.155 994.57 474.158 987.43 481.023 976.157L483.779 971.63L487.289 971.138C500.584 969.273 512.058 960.862 517.837 948.744L521.316 941.448L534.237 938.889C545.258 936.706 554.763 929.598 560.046 919.682C577.736 886.482 557.702 845.345 520.559 839.386Z" fill="url(#paint22_linear_70:301)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M403.115 849.566L403.247 848.805C403.381 848.03 403.544 847.268 403.733 846.519C406.512 851.346 408.485 856.604 409.567 862.085L422.809 929.184C425.868 944.685 436.213 957.759 450.594 964.3L479.7 977.538C479.31 978.099 478.908 978.649 478.492 979.186L449.766 966.121C434.798 959.312 424.031 945.705 420.847 929.572L407.605 862.472C406.716 857.972 405.203 853.629 403.115 849.566ZM462.257 991.607C463.081 991.265 463.892 990.896 464.69 990.5L432.714 976.292C414.867 968.362 403.433 950.592 403.612 931.064L404.17 870.158C404.216 865.119 403.515 860.132 402.115 855.352L401.261 860.287C401.893 863.516 402.2 866.816 402.17 870.139L401.612 931.046C401.426 951.371 413.327 969.866 431.901 978.12L462.257 991.607ZM486.493 970.628L461.311 954.101C452.279 948.174 445.363 939.532 441.559 929.42L417.127 864.476C416.029 861.557 414.655 858.749 413.023 856.091L404.908 842.874C405.207 842.116 405.535 841.375 405.891 840.652L414.728 855.045C416.426 857.811 417.856 860.733 418.999 863.772L443.431 928.716C447.086 938.431 453.731 946.734 462.408 952.429L489.421 970.157C488.709 970.297 487.991 970.417 487.267 970.519L486.493 970.628ZM498.421 967.25L407.961 837.093C408.357 836.508 408.774 835.938 409.209 835.385L500.237 966.359C499.639 966.671 499.034 966.968 498.421 967.25ZM514.444 953.898L423.24 825.478C423.906 825.253 424.581 825.051 425.264 824.873L515.629 952.111C515.249 952.719 514.854 953.314 514.444 953.898ZM521.922 940.705L516.077 916.28C513.661 906.185 508.103 897.119 500.202 890.387L447.387 845.384C444.917 843.279 442.652 840.942 440.626 838.406L429.211 824.125C430.007 824.03 430.81 823.966 431.619 823.934L442.188 837.158C444.135 839.594 446.311 841.839 448.685 843.862L501.5 888.865C509.722 895.871 515.508 905.308 518.022 915.814L523.885 940.316L521.922 940.705ZM533.62 938.388L531.25 909.19C529.972 893.443 521.18 879.278 507.635 871.145L448.999 835.938C443.784 832.807 439.177 828.771 435.39 824.027C436.244 824.101 437.103 824.213 437.963 824.363L438.328 824.427C441.687 828.277 445.633 831.584 450.028 834.223L508.664 869.43C522.762 877.895 531.913 892.638 533.244 909.029L535.593 937.97C535.136 938.078 534.677 938.178 534.216 938.27L533.62 938.388ZM551.035 930.169L548.594 896.434C547.185 876.956 534.344 860.175 515.912 853.722L458.423 833.598C452.974 831.69 447.92 828.883 443.458 825.322L447.887 826.094C451.344 828.425 455.104 830.317 459.084 831.71L516.572 851.835C535.757 858.55 549.122 876.017 550.589 896.29L552.918 928.472C552.309 929.059 551.681 929.625 551.035 930.169Z" fill="#D1C0AF"/>
<path d="M332.664 870.394L303.299 889.402L297.026 893.238C269.22 910.242 260.073 946.335 276.426 974.529L282.023 984.181C289.965 997.873 309.911 997.351 317.126 983.262L320.313 977.038C331.449 955.29 339.199 931.969 343.295 907.881L347.957 880.465C349.416 871.882 339.972 865.663 332.664 870.394Z" fill="#F5E1AE"/>
</g>
<defs>
<linearGradient id="paint0_linear_70:301" x1="1346.74" y1="1091.12" x2="627.885" y2="86.6374" gradientUnits="userSpaceOnUse">
<stop stop-color="#C0793C"/>
<stop offset="1" stop-color="#EBB484"/>
</linearGradient>
<radialGradient id="paint1_radial_70:301" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(960.161 551.878) rotate(90.7249) scale(370.658 387.151)">
<stop stop-color="#F1D49A"/>
<stop offset="1" stop-color="#DF9D64"/>
</radialGradient>
<linearGradient id="paint2_linear_70:301" x1="934.709" y1="688.144" x2="942.209" y2="288.146" gradientUnits="userSpaceOnUse">
<stop stop-color="#CFB996"/>
<stop offset="1" stop-color="#EEEDDF"/>
</linearGradient>
<radialGradient id="paint3_radial_70:301" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(911.46 331.039) rotate(90) scale(171.62)">
<stop stop-color="white"/>
<stop offset="0.564807" stop-color="#EDEBDB"/>
<stop offset="0.951323" stop-color="#E2DAC5"/>
</radialGradient>
<radialGradient id="paint4_radial_70:301" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(891.921 330.791) rotate(86.2482) scale(91.7891)">
<stop stop-color="#E0D8C2"/>
<stop offset="1" stop-color="#E0D8C2" stop-opacity="0"/>
</radialGradient>
<linearGradient id="paint5_linear_70:301" x1="1183.11" y1="901.368" x2="1190.61" y2="501.37" gradientUnits="userSpaceOnUse">
<stop stop-color="#CFB996"/>
<stop offset="1" stop-color="#EEEDDF"/>
</linearGradient>
<radialGradient id="paint6_radial_70:301" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1171.99 548.754) rotate(90) scale(171.62)">
<stop stop-color="white"/>
<stop offset="0.564807" stop-color="#EDEBDB"/>
<stop offset="0.951323" stop-color="#E2DAC5"/>
</radialGradient>
<radialGradient id="paint7_radial_70:301" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1159.29 533.911) rotate(134.961) scale(91.7891)">
<stop stop-color="#E0D8C2"/>
<stop offset="1" stop-color="#E0D8C2" stop-opacity="0"/>
</radialGradient>
<linearGradient id="paint8_linear_70:301" x1="818.615" y1="1021.15" x2="826.115" y2="621.153" gradientUnits="userSpaceOnUse">
<stop stop-color="#CFB996"/>
<stop offset="1" stop-color="#EEEDDF"/>
</linearGradient>
<radialGradient id="paint9_radial_70:301" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(784.292 669.81) rotate(90) scale(171.62)">
<stop stop-color="white"/>
<stop offset="0.564807" stop-color="#EDEBDB"/>
<stop offset="0.951323" stop-color="#E2DAC5"/>
</radialGradient>
<radialGradient id="paint10_radial_70:301" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(770.762 683.907) rotate(39.3454) scale(91.7891)">
<stop stop-color="#E0D8C2"/>
<stop offset="1" stop-color="#E0D8C2" stop-opacity="0"/>
</radialGradient>
<linearGradient id="paint11_linear_70:301" x1="261.059" y1="457" x2="261.059" y2="809.117" gradientUnits="userSpaceOnUse">
<stop stop-color="#64626F"/>
<stop offset="1" stop-color="#64626F" stop-opacity="0.34"/>
</linearGradient>
<linearGradient id="paint12_linear_70:301" x1="1626.03" y1="309.134" x2="1428.41" y2="142.436" gradientUnits="userSpaceOnUse">
<stop stop-color="#80D78C"/>
<stop offset="1" stop-color="#61B078"/>
</linearGradient>
<linearGradient id="paint13_linear_70:301" x1="1945.63" y1="448.003" x2="2010.32" y2="697.667" gradientUnits="userSpaceOnUse">
<stop stop-color="#64B581"/>
<stop offset="0.741777" stop-color="#C8E797"/>
<stop offset="0.974604" stop-color="#E3EBB4"/>
</linearGradient>
<linearGradient id="paint14_linear_70:301" x1="1828.13" y1="329.092" x2="1953.37" y2="482.122" gradientUnits="userSpaceOnUse">
<stop stop-color="#64B581"/>
<stop offset="0.741777" stop-color="#C8E797"/>
<stop offset="0.974604" stop-color="#E3EBB4"/>
</linearGradient>
<linearGradient id="paint15_linear_70:301" x1="1718.04" y1="294.069" x2="1852.11" y2="376.607" gradientUnits="userSpaceOnUse">
<stop stop-color="#64B581"/>
<stop offset="0.782584" stop-color="#C8E797"/>
<stop offset="0.974604" stop-color="#E3EBB4"/>
</linearGradient>
<linearGradient id="paint16_linear_70:301" x1="1672.52" y1="354.643" x2="1924.43" y2="640.534" gradientUnits="userSpaceOnUse">
<stop stop-color="#64B581"/>
<stop offset="0.782584" stop-color="#C8E797"/>
<stop offset="0.974604" stop-color="#E3EBB4"/>
</linearGradient>
<linearGradient id="paint17_linear_70:301" x1="362.582" y1="406.441" x2="364.596" y2="360.98" gradientUnits="userSpaceOnUse">
<stop stop-color="#E23B45"/>
<stop offset="1" stop-color="#F4616A"/>
</linearGradient>
<linearGradient id="paint18_linear_70:301" x1="399.582" y1="467.441" x2="401.596" y2="421.98" gradientUnits="userSpaceOnUse">
<stop stop-color="#E23B45"/>
<stop offset="1" stop-color="#F4616A"/>
</linearGradient>
<linearGradient id="paint19_linear_70:301" x1="660.5" y1="-78" x2="414.924" y2="563.499" gradientUnits="userSpaceOnUse">
<stop offset="0.186406" stop-color="#F7E0C7"/>
<stop offset="0.93046" stop-color="#EEC8A1"/>
</linearGradient>
<linearGradient id="paint20_linear_70:301" x1="660.5" y1="5.49999" x2="414.924" y2="646.999" gradientUnits="userSpaceOnUse">
<stop offset="0.186406" stop-color="#F7E0C7"/>
<stop offset="0.93046" stop-color="#EEC8A1"/>
</linearGradient>
<linearGradient id="paint21_linear_70:301" x1="394.043" y1="292.256" x2="499.916" y2="337.304" gradientUnits="userSpaceOnUse">
<stop stop-color="#D55561"/>
<stop offset="1" stop-color="#EB8B75"/>
</linearGradient>
<linearGradient id="paint22_linear_70:301" x1="463.261" y1="895.519" x2="549.986" y2="1018.91" gradientUnits="userSpaceOnUse">
<stop stop-color="#F5E6D5"/>
<stop offset="1" stop-color="#DFD1C2"/>
</linearGradient>
<clipPath id="clip0_70:301">
<rect width="1920" height="1080" fill="white"/>
</clipPath>
</defs>
</svg>
有趣的是,如果我用鼠标左键按下 svg 并使用 'Open image in new tab',所有浏览器都会显示正确的 .svg 文件。
Chromium-based 浏览器似乎对 Firefox 的 XML 语法表现出不同的遵从性。实际上,应该避免在 svg id 中使用冒号 :
。在 svg 的源代码中,您可以在 id 中看到一个冒号,例如:
id="paint0_linear_70:301"
冒号会导致 Chromium-based 浏览器出现渲染问题。您可以简单地删除所有这些冒号来解决问题。请确保您遵守 XML 文档,并且不要忘记对引用此 id 的代码进行相同的修改,例如:
fill="url(#paint0_linear_70:301)"
关于svg id的更多信息,您可以阅读this doc and