主頁 > 企業開發 > React.js：SVG沒有在Chrome/Brave/Edge中正確顯示

React.js：SVG沒有在Chrome/Brave/Edge中正確顯示

2022-05-31 23:08:48 企業開發

我如何匯入 .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 作為道具傳遞）：

<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 上按下滑鼠左鍵并使用“在新選項卡中打開影像”，所有瀏覽器都會顯示正確的 .svg 檔案。

React.js：SVG 沒有在 Chrome/Brave/Edge 中正確顯示

uj5u.com熱心網友回復：

基于 Chromium 的瀏覽器似乎對 XML 語法的遵從性與 Firefox 不同。實際上，:在 svg id 中應該避免使用冒號。在 svg 的源代碼中，您可以在 id 中看到一個冒號，例如：

id="paint0_linear_70:301"

冒號會導致基于 Chromium 的瀏覽器出現渲染問題。您可以簡單地洗掉所有這些冒號來解決問題。確保您遵守 XML 檔案，并且不要忘記對參考此 id 的代碼進行相同的修改，例如：

fill="url(#paint0_linear_70:301)"

有關 svg id 的更多資訊，您可以閱讀此檔案和此執行緒。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/483619.html

標籤：反应 svg 火狐 微软边缘 勇敢的

上一篇：Firefox上的空大寬度div沒有滾動條

下一篇：否則行內？[復制]

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C＃(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • IEEE1588PTP在數字化變電站時鐘同步方面的應用

    IEEE1588ptp在數字化變電站時鐘同步方面的應用 京準電子科技官微——ahjzsz 一、電力系統時間同步基本概況 隨著對IEC 61850標準研究的不斷深入，國內外學者提出基于IEC61850通信標準體系建設數字化變電站的發展思路。數字化變電站與常規變電站的顯著區別在于程序層傳統的電流/電壓互 ......

    uj5u.com 2020-09-10 03:51:52 more
  • HTTP request smuggling CL.TE

    CL.TE 簡介 前端通過Content-Length處理請求，通過反向代理或者負載均衡將請求轉發到后端，后端Transfer-Encoding優先級較高，以TE處理請求造成安全問題。 檢測 發送如下資料包 POST / HTTP/1.1 Host: ac391f7e1e9af821806e890 ......

    uj5u.com 2020-09-10 03:52:11 more
  • 網路滲透資料大全單——漏洞庫篇

    網路滲透資料大全單——漏洞庫篇漏洞庫 NVD ——美國國家漏洞庫 →http://nvd.nist.gov/。 CERT ——美國國家應急回應中心 →https://www.us-cert.gov/ OSVDB ——開源漏洞庫 →http://osvdb.org Bugtraq ——賽門鐵克 →ht ......

    uj5u.com 2020-09-10 03:52:15 more
  • 京準講述NTP時鐘服務器應用及原理

    京準講述NTP時鐘服務器應用及原理京準講述NTP時鐘服務器應用及原理 安徽京準電子科技官微——ahjzsz 北斗授時原理 授時是指接識訓通過某種方式獲得本地時間與北斗標準時間的鐘差，然后調整本地時鐘使時差控制在一定的精度范圍內。 衛星導航系統通常由三部分組成：導航授時衛星、地面檢測校正維護系統和用戶 ......

    uj5u.com 2020-09-10 03:52:25 more
  • 利用北斗衛星系統設計NTP網路時間服務器

    利用北斗衛星系統設計NTP網路時間服務器 利用北斗衛星系統設計NTP網路時間服務器 安徽京準電子科技官微——ahjzsz 概述 NTP網路時間服務器是一款支持NTP和SNTP網路時間同步協議，高精度、大容量、高品質的高科技時鐘產品。 NTP網路時間服務器設備采用冗余架構設計，高精度時鐘直接來源于北斗 ......

    uj5u.com 2020-09-10 03:52:35 more
  • 詳細解讀電力系統各種對時方式

    詳細解讀電力系統各種對時方式 詳細解讀電力系統各種對時方式 安徽京準電子科技官微——ahjzsz，更多資料請添加VX 衛星同步時鐘是我京準公司開發研制的應用衛星授時時技術的標準時間顯示和發送的裝置，該裝置以M國全球定位系統（GLOBAL POSITIONING SYSTEM,縮寫為GPS）或者我國北 ......

    uj5u.com 2020-09-10 03:52:45 more
  • 如何保證外包團隊接入企業內網安全

    不管企業規模的大小，只要企業想省錢，那么企業的某些服務就一定會采用外包的形式，然而看似美好又經濟的策略，其實也有不好的一面。下面我通過安全的角度來聊聊使用外包團的安全隱患問題。 先看看什么服務會使用外包的，最常見的就是話務/客服這種需要大量重復性、無技術性的服務，或者是一些銷售外包、特殊的職能外包等 ......

    uj5u.com 2020-09-10 03:52:57 more
  • PHP漏洞之【整型數字型SQL注入】

    0x01 什么是SQL注入 SQL是一種注入攻擊，通過前端帶入后端資料庫進行惡意的SQL陳述句查詢。 0x02 SQL整型注入原理 SQL注入一般發生在動態網站URL地址里，當然也會發生在其它地發，如登錄框等等也會存在注入，只要是和資料庫打交道的地方都有可能存在。 如這里http://192.168. ......

    uj5u.com 2020-09-10 03:55:40 more
  • [GXYCTF2019]禁止套娃

    git泄露獲取原始碼 使用GET傳參，引數為exp 經過三層過濾執行 第一層過濾偽協議，第二層過濾帶引數的函式，第三層過濾一些函式 preg_replace('/[a-z,_]+\((?R)?\)/', NULL, $_GET['exp'] (?R)參考當前正則運算式，相當于匹配函式里的引數 因此傳遞 ......

    uj5u.com 2020-09-10 03:56:07 more
  • 等保2.0實施流程

    流程 結論 ......

    uj5u.com 2020-09-10 03:56:16 more
最新发布
  • 使用Django Rest framework搭建Blog

    在前面的Blog例子中我們使用的是GraphQL, 雖然GraphQL的使用處于上升趨勢,但是Rest API還是使用的更廣泛一些. 所以還是決定回到傳統的rest api framework上來, Django rest framework的官網上給了一個很好用的QuickStart, 我參考Qu ......

    uj5u.com 2023-04-20 08:17:54 more
  • 記錄-new Date() 我忍你很久了！

    這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 大家平時在開發的時候有沒被new Date()折磨過？就是它的諸多怪異的設定讓你每每用的時候，都可能不小心踩坑。造成程式意外出錯，卻一下子找不到問題出處，那叫一個煩透了…… 下面，我就列舉它的“四宗罪”及應用思考 可惡的四宗罪 1. Sa ......

    uj5u.com 2023-04-20 08:17:47 more
  • 使用Vue.js實作文字跑馬燈效果

    實作文字跑馬燈效果，首先用到 substring()截取 和 setInterval計時器 clearInterval()清除計時器 效果如下： 實作代碼如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ......

    uj5u.com 2023-04-20 08:12:31 more
  • JavaScript 運算子

    JavaScript 運算子/運算子 在 JavaScript 中，有一些運算子可以使代碼更簡潔、易讀和高效。以下是一些常見的運算子： 1、可選鏈運算子（optional chaining operator） ?.是可選鏈運算子（optional chaining operator）。?. 可選鏈操 ......

    uj5u.com 2023-04-20 08:02:25 more
  • CSS—相對單位rem

    一、概述 rem是一個相對長度單位，它的單位長度取決于根標簽html的字體尺寸。rem即root em的意思，中文翻譯為根em。瀏覽器的文本尺寸一般默認為16px，即默認情況下： 1rem = 16px rem布局原理：根據CSS媒體查詢功能，更改根標簽的字體尺寸，實作rem單位隨螢屏尺寸的變化，如 ......

    uj5u.com 2023-04-20 08:02:21 more
  • 我的第一個NPM包:panghu-planebattle-esm(胖虎飛機大戰)使用說明

    好家伙,我的包終于開發完啦 歡迎使用胖虎的飛機大戰包!! 為你的主頁添加色彩 這是一個有趣的網頁小游戲包,使用canvas和js開發 使用ES6模塊化開發 效果圖如下: (覺得圖片太sb的可以自己改) 代碼已開源!! Git: https://gitee.com/tang-and-han-dynas ......

    uj5u.com 2023-04-20 08:01:50 more
  • 如何在 vue3 中使用 jsx/tsx?

    我們都知道,通常情況下我們使用 vue 大多都是用的 SFC(Signle File Component)單檔案組件模式,即一個組件就是一個檔案,但其實 Vue 也是支持使用 JSX 來撰寫組件的。這里不討論 SFC 和 JSX 的好壞,這個仁者見仁智者見智。本篇文章旨在帶領大家快速了解和使用 Vu ......

    uj5u.com 2023-04-20 08:01:37 more
  • 【Vue2.x原始碼系列06】計算屬性computed原理

    本章目標：計算屬性是如何實作的？計算屬性快取原理以及洋蔥模型的應用？在初始化Vue實體時，我們會給每個計算屬性都創建一個對應watcher，我們稱之為計算屬性watcher ......

    uj5u.com 2023-04-20 08:01:31 more
  • http1.1與http2.0

    一、http是什么 通俗來講，http就是計算機通過網路進行通信的規則，是一個基于請求與回應，無狀態的，應用層協議。常用于TCP/IP協議傳輸資料。目前任何終端之間任何一種通信方式都必須按Http協議進行，否則無法連接。tcp(三次握手，四次揮手)。 請求與回應：客戶端請求、服務端回應資料。 無狀態 ......

    uj5u.com 2023-04-20 08:01:10 more
  • http1.1與http2.0

    一、http是什么 通俗來講，http就是計算機通過網路進行通信的規則，是一個基于請求與回應，無狀態的，應用層協議。常用于TCP/IP協議傳輸資料。目前任何終端之間任何一種通信方式都必須按Http協議進行，否則無法連接。tcp(三次握手，四次揮手)。 請求與回應：客戶端請求、服務端回應資料。 無狀態 ......

    uj5u.com 2023-04-20 08:00:32 more

Copyright © 2010-2020 有解無憂