html - svg sprites 在 html 上没有输出
问题描述
我最近被介绍给 svg sprite,我决定在我当前的项目中第一次尝试它,但我很确定缺少一些东西,即使在阅读了一些文档和教程之后我也无法弄清楚。
精灵
<svg xmlns='http://www.w3.org/2000/svg'>
<defs>
<symbol id="icon-github" viewBox='0 0 24 24'>
<title>Github Icon</title>
<path d='M.184 10.462c-.779 4.906 1.401 10.823 8.123 13.006.12.022.231.032.335.032.782 01.32-.582 1.32-1.3-.097-.523.383-2.642-.92-2.357-2.519.536-2.821-.871-3.205-1.607 1.086 1.394 2.718 1.359 3.949.819.683-.3.326-1.064.65-1.343a.75.75 0 00-.407-1.314c-2.314-.255-4.457-1.001-4.457-4.702 0-2.168 1.505-2.362 1.09-3.269-.015-.033-.333-.754-.045-1.849 1.419.262 2.072 1.28 2.753 1.097 1.687-.46 3.544-.46 5.23 0 .704.189 1.207-.801 2.738-1.103.441 1.654-.473 2.058.103 2.677.632.68.953 1.503.953 2.447 0 5.564-4.717 3.957-5.101 5.22a.748.748 0 00.235.792c.61.513.53 1.83.465 2.889-.067 1.098-.125 2.045.482 2.579.214.19.595.393 1.284.253 6.634-2.131 8.83-8.022 8.063-12.917C21.726-2.856 2.296-2.84.184 10.462zm8.27 10.978l.004.505a11.811 11.811 0 01-1.475-.623c.425.109.913.156 1.471.118zm.37-3.7l-.015.08c-.853.252-1.509.001-1.957-.752l-.001-.002c.68.364 1.381.56 1.973.674zM12 2c11.833 0 14.502 16.267 3.469 19.941-.038-.297-.003-.857.021-1.252.058-.951.126-2.059-.213-2.985 5.088-1.059 5.513-6.646 3.554-9.135.243-.952.145-3.189-.729-3.463-.206-.065-1.305-.304-3.437 1.037a11.657 11.657 0 00-5.361 0c-1.064-.667-3.462-1.752-3.922-.6-.534 1.342-.407 2.427-.248 3.03-1.739 2.204-1.218 5.894.534 7.626-.993-.475-2.361-.637-2.656.314-.323 1.037.912.911 1.679 2.804.073.236.208.513.415.788C-1.705 14.54 1.581 2 12 2z'></path>
</symbol>
和 HTML:
<div class="container__footer">
<a class="container__button" href="https://github.com/" target="_blank">
<svg class="container__icon">
<use xlink:href="../_src/sprites/defs.svg#icon-github"></use>
</svg>
</a>
</div>
我可能犯的任何错误?
解决方案
推荐阅读
- python - 创建一个列,根据条件删除不需要的字符串部分
- python - 使用 matplotlib 时,AttributeError: 'numpy.datetime64' object has no attribute 'toordinal'
- python - 以特定模式重复字符串而不切片
- java - 如何使用 React Native 关闭像 modal 这样的组件?
- angular - Typescript:通用类型检查和子可用性
- java - 如何传递 id 是否正确?我不明白错误?
- javascript - Client.db 未定义(MongoDB 后端 API)错误
- spring-boot - 资源服务器的 Spring 集成测试(基于 spring-cloud-starter-oauth2)
- ios - 如何使用 for 循环获取 UNNotificationRequest 数组以填充 SwiftUI 列表视图?
- wordpress - ansible playbook 使用 wp-cli 安装 WordPress 时出错