svgprite 加载所有图标期望一个

Question

我正在使用哈巴狗引擎并尝试从 spritemap.vsg 加载 svgs 我有 4 个图标它们都正常显示，除了一个所以我有这个 mixin 并且它工作得很好但是其中一个图标没有显示

mixin svg(svg_file, name, size)
  span.icon
    svg(width=size, height=size, aria-hidden=true role="presentation")
      use(xlink:href=svg_file + '#' + name)

现在使用图标：

 +svg('arrow', 500) --> shows normally

+svg('quote', 500) --> shows normally

+svg('illustration', 500) --> shows normally

+svg('logo', 500) --> doesn't show

我预计我的徽标图标本身可能有问题但是当我在 codepen 上使用完全相同的 sprite svg 文件时，我的所有图标都显示正常

<svg xmlns="http://www.w3.org/2000/svg"><symbol fill="none" id="sprite-arrow" viewBox="0 0 32 31"><title>arrow</title><path d="M1 30.645 30.348 1.358M14.043 1h16.63v17.5" stroke="#8A8474"/></symbol><symbol fill="none" id="sprite-illustration" viewBox="0 0 2433 720"><title>illustration</title><path d="M2432.54 720.212s-243.76-79.327-519.19-79.327c-192.2 0-468.05 31.945-727.89 49.904C1086.53 697.629 0 720 0 720l2432.54.212Z" fill="#C7C7C7"/><path d="M2029.67 634.892c-6.2 6.2-78.44 8.964-104.59 8.964-26.15 0-98.43-2.764-104.59-8.964-6.16-6.201 81.21-485.819 104.59-485.819 23.38 0 110.79 479.655 104.59 485.819Z" fill="#FDAD30"/><path d="M2031.12 512.673c-17.81 6.798-83.89 33.618-98.12 41.537v-9.003a7537.384 7537.384 0 0 1 47.88-27.94c17.15-10.011 35.56-18.901 51.55-30.667.79-.56.34-2.167-.74-1.718-17.6 7.47-34 18.228-50.43 27.865-16.44 9.638-32.28 19.312-48.3 29.211 0-22.96-.1-45.945-.3-68.955a541.198 541.198 0 0 0 75.23-38.287c.86-.485.3-2.017-.67-1.606a552.595 552.595 0 0 0-74.71 36.756c0-11.953-.09-23.907-.26-35.86-.67-61.521-.78-123.266-2.35-184.712 15.65-7.882 31.78-14.941 47.44-22.786 1.04-.523.29-2.316-.79-1.905-15.87 6.201-31.19 13.56-46.76 20.433-.86-31.788-2.06-63.501-4-95.214a.838.838 0 0 0-.24-.581.845.845 0 0 0-.58-.241.81.81 0 0 0-.58.241.806.806 0 0 0-.25.581c-2.2 58.943-2.01 117.962-1.27 176.98-16.21-12.961-33.61-24.429-50.01-36.98-.67-.485-1.27.598-.64 1.084 17.26 13.111 33.4 27.678 50.73 40.789v9.974c-17.59-8.031-35.45-15.502-53.23-23.122-1.38-.598-2.61 1.382-1.19 2.092 18.11 8.666 36.15 17.519 54.49 25.736.42 29.211.9 58.421 1.27 87.631.68 51.062 1.8 102.087 2.88 153.149a3882.93 3882.93 0 0 0-100.33-49.007c-1.31-.598-2.39 1.195-1.12 1.905 32.9 18.846 66.8 35.88 101.56 51.024.9 42.396 1.76 84.793 2.32 127.189.06.483.3.925.67 1.246.37.32.84.497 1.33.497a2.034 2.034 0 0 0 2-1.743c-.6-54.051-.68-108.325-.83-162.226 17.52-4.333 83.67-32.647 99.36-40.416 1.83-.785.71-3.586-1.01-2.951Z" fill="#263238"/><path d="M2246.38 656.169c4.66 4.624 58.84 6.687 78.56 6.687s73.86-2.063 78.52-6.687c4.67-4.623-61.13-364.845-78.52-364.845-17.39 0-83.23 360.183-78.56 364.845Z" fill="#C7C7C7"/><path d="M2245.27 564.386c13.41 5.082 63.01 25.296 73.71 31.181v-6.764c-11.96-7.069-24-14.024-36-21.016a430.233 430.233 0 0 1-38.71-22.927c-.57-.421-.22-1.643.58-1.299a324.908 324.908 0 0 1 37.87 20.939c12.19 7.146 24.22 14.521 36.26 21.934 0-17.272.07-34.531.23-51.777a411.08 411.08 0 0 1-56.52-28.735c-.65-.382-.23-1.49.5-1.223a419.11 419.11 0 0 1 56.02 27.627c0-8.979 0-17.959.19-26.748.5-46.236.61-92.51 1.76-138.708-11.73-5.961-23.85-11.196-35.62-17.157-.76-.382-.23-1.72.61-1.414 11.93 4.662 23.39 10.202 35.12 15.285.61-23.844 1.53-47.689 2.98-71.494 0-.765 1.22-.803 1.22 0 1.69 44.287 1.53 88.612.96 132.9 12.19-9.706 25.18-18.304 37.6-27.742.46-.382.96.42.46.802-12.96 9.859-25.11 20.788-38.21 30.57v7.642c13.18-6.037 26.75-11.654 39.97-17.386 1.03-.459 1.94 1.07.88 1.567-13.57 6.534-27.14 13.183-40.89 19.335l-.99 65.838c-.5 38.212-1.34 76.615-2.14 114.941a2936.871 2936.871 0 0 1 75.35-36.798c.95-.458 1.79.917.84 1.452a790.764 790.764 0 0 1-76.42 38.212c-.69 31.868-1.34 63.699-1.76 95.529a1.493 1.493 0 0 1-2.55 1.054c-.28-.28-.43-.659-.43-1.054.42-40.619.49-81.2.61-121.819-13.15-3.248-62.82-24.532-74.63-30.34-.99-.802-.11-2.904 1.15-2.407Z" fill="#263238"/><path d="M1705.23 657.761c4.5 4.508 57.34 6.52 76.57 6.52 19.22 0 72.06-2.012 76.6-6.52 4.55-4.509-59.61-355.761-76.6-355.761-16.99 0-81.12 351.215-76.57 355.761Z" fill="#47CEFB"/><path d="M1704.15 568.262c13.04 4.955 61.4 24.666 71.87 30.404v-6.744c-11.66-6.893-23.36-13.675-35.06-20.493-12.56-7.452-26.08-13.824-37.75-22.356-.55-.41-.26-1.603.53-1.267a316.195 316.195 0 0 1 36.96 20.418c11.88 6.968 23.62 14.159 35.36 21.388 0-16.842.06-33.671.18-50.488a402.515 402.515 0 0 1-55.1-28.02c-.6-.372-.19-1.453.52-1.192a410.13 410.13 0 0 1 54.62 26.939c0-8.756 0-17.512.19-26.082.48-45.085.56-90.207 1.71-135.255-11.47-5.812-23.29-10.917-34.72-16.729-.75-.373-.23-1.677.55-1.379 11.63 4.546 22.84 9.948 34.25 14.904.63-23.25 1.52-46.501 2.94-69.714 0-.158.06-.31.17-.421a.603.603 0 0 1 .85 0c.11.111.17.263.17.421 1.6 43.185 1.49 86.407.93 129.591 11.89-9.464 24.56-17.847 36.63-27.051.48-.372.93.41.49.783-12.64 9.613-24.48 20.269-37.27 29.808v7.452c12.9-5.887 26.09-11.364 38.98-16.953 1.04-.448 1.94 1.043.89 1.527-13.26 6.372-26.45 12.855-39.9 18.854-.3 21.387-.67 42.812-.93 64.199-.49 37.261-1.31 74.707-2.13 112.079a3056.398 3056.398 0 0 1 73.48-35.882c.97-.447 1.75.895.86 1.416a775.339 775.339 0 0 1-74.52 37.261c-.67 31.075-1.31 62.112-1.72 93.15-.05.35-.23.669-.5.899-.27.23-.62.357-.97.357s-.7-.127-.97-.357c-.27-.23-.45-.549-.5-.899.45-39.607.52-79.178.63-118.785-12.85-3.168-61.29-23.922-72.77-29.585-1.04-.634-.22-2.683 1.05-2.198Z" fill="#263238"/><path d="M2159.23 612.627c7.82 7.818 98.81 11.278 131.87 11.278s123.88-3.46 131.92-11.278C2431.05 604.81 2320.49 0 2291.1 0c-29.39 0-139.78 604.81-131.87 612.627Z" fill="#8739E1"/><path d="M2157.39 458.498c22.47 8.544 105.77 42.719 123.88 52.373v-11.363c-20.07-11.833-40.24-23.495-60.4-35.243-21.61-12.559-44.85-23.794-65.02-38.446-.98-.726-.42-2.777.94-2.179 22.22 9.227 42.72 22.983 63.61 35.115 20.89 12.132 40.71 24.392 60.87 36.866 0-29.02.13-58.012.39-86.975a689.732 689.732 0 0 1-94.92-48.229c-1.03-.641-.34-2.521.85-2.051a698.844 698.844 0 0 1 93.98 46.392c0-15.093.1-30.159.3-45.196.86-77.619.99-155.325 2.99-232.944-19.78-9.954-40.11-18.754-59.8-28.75-1.28-.64-.39-2.905 1.02-2.392 19.99 7.818 39.3 17.087 58.95 25.631 1.07-40.07 2.61-80.097 5.04-120.082 0-.272.11-.532.31-.725.19-.192.45-.3.72-.3.27 0 .53.108.73.3.19.193.3.453.3.725 2.77 74.33 2.56 148.746 1.62 223.162 20.46-16.318 42.25-30.757 63.09-46.606.82-.598 1.58.769.77 1.367-21.74 16.575-42.12 34.901-64.07 51.262v12.816c22.21-10.124 44.72-19.565 67.11-29.177 1.75-.769 3.33 1.752 1.53 2.606-22.81 10.979-45.58 22.128-68.73 32.466-.51 36.852-1.05 73.704-1.62 110.556-.82 64.334-2.23 128.668-3.63 193.002a5044.513 5044.513 0 0 1 126.57-61.771c1.58-.769 2.99 1.495 1.41 2.435a1322.632 1322.632 0 0 1-128.16 64.292c-1.13 53.483-2.12 106.953-2.94 160.408a2.524 2.524 0 0 1-4.31 1.782 2.525 2.525 0 0 1-.73-1.782c.77-68.35.85-136.401 1.06-204.579-22.08-5.468-105.51-41.181-125.33-50.964-1.97-1.068-.56-4.528 1.62-3.802Z" fill="#263238"/></symbol><symbol fill="none" id="sprite-logo" viewBox="0 0 30 30"><title>logo</title><path d="M19.666 11.997c-4.753 1.275-7.212-.915-7.847-2.169.388 6.182 1.948 7.818 2.68 7.863 2.997-.407 6.351 1.028 7.654 1.796 2.17-2.901 5.791-3.084 7.33-2.813-1.291-2.09-5.063-5.951-9.817-4.677Z" fill="url(#a)"/><path d="M22.217 19.42c3.876 1.897 6.298 6.404 7.783 8.946-4.96-3.524-9.516-1.536-11.173-.101-.776.542-2.745 1.647-4.134 1.728-2.906.17-4.166-2.745-4.682-6.168-.414-2.738-2.261-2.971-3.068-2.711.936-.746 2.849-1.898 4.295.067 1.446 1.966 2.066 2.17 2.648 2.407 3.875 1.05 7.007-2.271 8.331-4.169Z" fill="url(#b)"/><path d="M12.161 22.4c3.591 3.768 8.235-.396 10.108-2.949-3.1-1.735-6.502-1.943-7.815-1.83-2.357.068-3.714 1.39-5.813.61-2.099-.78-4.262-2.677-1.937-9.726 1.86-5.64-.065-7.999-1.26-8.473l.007.023c.388 1.289 1.01 3.358-2.17 7.738-5.632 7.754-2.756 15.612-.614 18.572l.027-.045c.67-1.096 2.162-3.534 4.01-5.005 2.066-1.83 3.681-1.152 4.036-.644.284.407 1.066 1.322 1.421 1.729Z" fill="url(#c)"/><path d="M6.62 8.235C8.325 2.975 6.534.554 5.425 0c1.809.542 6.298 2.033 6.298 8.676.516 7.862 2.002 8.258 2.777 8.913-.442.011-1.583.217-2.616.542-1.033.326-1.927.418-2.131.407-4.166-.712-5.264-3.728-3.133-10.303Z" fill="url(#d)"/><defs><linearGradient id="a" x1="15" y1="0" x2="15" y2="30" gradientUnits="userSpaceOnUse"><stop stop-color="#FDAD31"/><stop offset="1" stop-color="#FCAD2F"/></linearGradient><linearGradient id="b" x1="15.084" y1=".096" x2="15.084" y2="30" gradientUnits="userSpaceOnUse"><stop stop-color="#45C8F8"/><stop offset="1" stop-color="#47D0FC"/></linearGradient><linearGradient id="c" x1="15" y1="0" x2="15" y2="30" gradientUnits="userSpaceOnUse"><stop stop-color="#671CB5"/><stop offset="1" stop-color="#671CB3"/></linearGradient><linearGradient id="d" x1="9.963" y1="0" x2="9.963" y2="18.404" gradientUnits="userSpaceOnUse"><stop stop-color="#AA6DEA"/><stop offset="1" stop-color="#7A27DE"/></linearGradient></defs></symbol><symbol fill="none" id="sprite-quote" viewBox="0 0 94 70"><title>quote</title><circle cx="22" cy="48" r="22" fill="#fff"/><path d="M46 1C21.147 1 1 21.147 1 46" stroke="#fff"/><circle cx="70" cy="48" r="21.5" fill="#fff" stroke="#fff"/><path d="M94 1C69.147 1 49 21.147 49 46" stroke="#fff"/></symbol></svg>

现在尝试使用徽标图标

<svg>
  <use xlink:href="#sprite-logo"></use>
</svg>

有用 ！！

有什么建议可能导致这个问题吗？

Answer 1

好吧，我解决了这个问题，以防万一有人遇到像我的 svg 这样的问题，它不会显示 defs 并且 defs 中的内容没有在浏览器中显示，我最终只是重新创建了徽标并且它工作正常。