英文:
My SVG sprite is not displaying as an external file
问题
我正在使用SVG精灵作为外部文件。它们在内部代码中工作并正常显示，但当我想将它们用作外部SVG文件时，它们不显示。
SVG代码：
<svg width="0" height="0" class="hidden">
<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" id="book-icon">
<!-- 这里是路径数据 -->
</symbol>
</svg>
<svg class="icon">
<use href="sprites.svg#book-icon"></use>
</svg>
以上代码在内部工作正常。
对于外部，我将SVG代码复制到一个名为 "sprites.svg" 的单独文件（位于根目录），然后在我的HTML文件中通过以下方式访问它们：
<svg class="icon">
<use href="sprites.svg#book-icon"></use>
</svg>
英文:
I am using SVG sprite as an external file.
They work and display fine while they are internal code, but when I want to use them as an external SVG file, it's not showing.
SVG code:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
<svg width="0" height="0" class="hidden">
<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" id="book-icon">
<path d="M919.6 285.3h-45.7v28.6h45.7c7.7 0 10.6 8.4 10.6 16.1v378.2c0 38.6-28 67.5-66.7 67.5H583.4c-23.2 0-45.3 21.4-45.3 44.6v4.6h-56.4v-4.6c0-23.2-15.2-44.6-38.4-44.6H163.2c-38.7 0-73.6-28.9-73.6-67.5V330c0-7.7 9.8-16 17.5-16H146v-28.7h-38.8A47.3 47.3 0 0 0 62 330v378.2c0 54 47 95.2 101.2 95.2h280.1c7.7 0 10.8 9.2 10.8 16.9v7c0 15.4 15.8 25.2 31.2 25.2h56c15.5 0 24.4-9.8 24.4-25.2v-7c0-7.7 10-17 17.7-17h280.1c54.1 0 94.4-41 94.4-95V330c0-23.2-15.1-44.7-38.3-44.7zm-647.7 0h167.9v28.6h-168zm0 63.5h167.9v27.6h-168zm0 62.4h167.9V440h-168zm308.1-126h168V314H580zm0 63.6h168v27.6H580zm0 62.4h168V440H580z" fill="#ff7415"></path>
<path fill="#262626" d="M842.5 230h-17.7v-5c0-31-21.4-58.5-52.3-58.5h-168a105 105 0 0 0-91.1 52.9 105 105 0 0 0-91-52.9H254.1A61 61 0 0 0 195 225v5h-11c-27 0-52.5 27.1-52.5 58v378.2c0 38.6 33.4 67.5 70 67.5h255.7c23.2 0 42 20.5 42 42h28c0-21.5 19-42 42-42H825c36.7 0 63.2-28.9 63.2-67.5V288c0-30.9-18.6-58-45.7-58zm-238-35.9h168c15.4 0 24.6 15.4 24.6 30.9v399.2c0 15.4-9.2 25.6-24.6 25.6h-168c-30.5 0-59.3 15.5-80.8 36.3V274c0-42.5 38.2-79.9 80.7-79.9zM222.6 225c0-15.5 16-30.9 31.5-30.9h168.1c42.5 0 73.8 37.4 73.8 79.9v411.9c-14.4-20.7-43.4-36.1-73.8-36.1h-168c-15.5 0-31.6-10.2-31.6-25.6V225zm-21 481c-21.3 0-42.5-16.6-42.5-39.8V288c0-15.2 13.6-30.4 25-30.4H195v366.6c0 30.9 28.2 53.2 59.1 53.2h168.1c26.7 0 50.3 14 64.1 34.8-8.8-4.1-18.7-6.1-29-6.1H201.6zm657.9-39.8c0 23.2-13.3 39.9-34.6 39.9H569.4c-10.4 0-20.2 2-29.1 6a77.3 77.3 0 0 1 64.1-34.7h168.1c30.9 0 52.2-22.3 52.2-53.2V257.6h17.8c11.4 0 17 15.2 17 30.4v378.2z"></path>
<path fill="#e0e0e0" d="M439.8 544.6a14 14 0 0 1-14 14h-140a14 14 0 0 1-14-14v-55.9a14 14 0 0 1 14-14h140a14 14 0 0 1 14 14v56zm308.2 0a14 14 0 0 1-14 14H594a14 14 0 0 1-14-14v-55.9a14 14 0 0 1 14-14h140a14 14 0 0 1 14 14v56z"></path>
</symbol>
</svg>
<!-- language: lang-html -->
<svg class="icon">
<use href="#book-icon"></use>
</svg>
<!-- end snippet -->
Above code works fine as an internal.
For external, I copied SVG codes into a single file (in root) "sprites.svg" and access them in my HTML file by the following:
<svg class="icon">
<use href="sprites.svg#book-icon"></use>
</svg>
答案1
得分: 0
找到了问题：
它是从你的硬盘上运行该文件，你必须将其作为本地主机运行。
英文:
Found the problem:
It was running the file from your disk, you must run it as a local host.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论