来自外部文件的 SVG 图标答案

【问题标题】：SVG icons from external file来自外部文件的 SVG 图标
【发布时间】：2017-08-09 18:02:40
【问题描述】：

<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol id="crop" viewBox="0 0 96 96"><path style=" stroke:none;fill-rule:nonzero;fill:rgb(35.686275%,35.686275%,35.686275%);fill-opacity:1;" d="M 20 8 L 20 20 L 8 20 L 8 32 L 20 32 L 20 76 L 64 76 L 64 88 L 76 88 L 76 76 L 88 76 L 88 64 L 37.75 64 L 64 37.75 L 64 60 L 76 60 L 76 25.75 L 86.875 14.875 L 81.125 9.125 L 70.25 20 L 36 20 L 36 32 L 58.25 32 L 32 58.25 L 32 8 Z "/></symbol><symbol id="delete" viewBox="0 0 96 96"><path d="M 36.125 -0.125 C 34.273438 -0.125 32.75 1.398438 32.75 3.25 L 32.75 14.75 C 21.882813 15.980469 14.375 18.484375 14.375 21.375 L 14.375 26.875 C 14.375 28.003906 15.578125 29.03125 17.625 30 C 22.984375 32.515625 34.570313 34.25 48 34.25 C 61.441406 34.25 73.007813 32.515625 78.375 30 C 80.410156 29.03125 81.625 28.003906 81.625 26.875 L 81.625 21.375 C 81.625 18.382813 73.519531 15.800781 62 14.625 L 62 3.25 C 62 1.394531 60.480469 -0.125 58.625 -0.125 Z M 39.5 6 L 55.375 6 C 55.710938 6 55.875 7.613281 55.875 9.625 L 55.875 14.125 C 53.328125 13.992188 50.742188 13.875 48 13.875 C 45.164063 13.875 42.378906 13.976563 39.75 14.125 L 38.875 14.25 L 38.875 9.625 C 38.875 7.613281 39.167969 6 39.5 6 Z M 19.125 38.125 C 18.765625 38.496094 18.585938 38.851563 18.5 39.25 L 18.5 39.5 C 18.5 39.554688 18.492188 39.699219 18.5 39.75 L 20.75 86.75 C 20.953125 90.4375 25.214844 96 48 96 C 70.785156 96 75.050781 90.4375 75.25 86.75 L 77.5 39.75 C 77.503906 39.695313 77.5 39.554688 77.5 39.5 L 77.5 39.25 C 77.4375 38.851563 77.238281 38.496094 76.875 38.125 C 73.941406 41.105469 62.105469 41.5 48 41.5 C 33.894531 41.5 22.074219 41.105469 19.125 38.125 Z "/></symbol><symbol id="default" viewBox="0 0 96 96"><path style=" stroke:none;fill-rule:nonzero;fill:rgb(35.686275%,35.686275%,35.686275%);fill-opacity:1;" d="M 88 40 L 60 36 L 48 8 L 36 36 L 8 40 L 28 60 L 24 88.070313 L 48 76 L 72 88 L 68 60 Z "/></symbol></svg>

我有按钮：默认、删除、裁剪。在html中我可以很容易地得到它

 <svg class="icon-small-new icon-grey">
        <use xlink:href="/i/svg/icons.svg#future"></use>
    </svg>

    <svg class="icon-small-new icon-grey">
        <use xlink:href="i/svg/icons-for-images.svg#crop"></use>
    </svg>

     <svg class="icon-small-new icon-grey">
        <use xlink:href="i/svg/icons-for-images.svg#delete"></use>
    </svg>

     <svg class="icon-small-new icon-grey">
        <use xlink:href="i/svg/icons-for-images.svg#default"></use>
    </svg>

但我需要像背景一样使用这个按钮。

我试过这样：

.crop-image {
    background: url('/i/svg/icons-for-images.svg#crop') 26px 26px;
    background-size: cover;
    width: 26px;
    height: 26px;
} 

.delete-image {
    background: url('/i/svg/icons-for-images.svg#delete') 0 96px;
    background-size: cover;
    width: 26px;
    height: 26px;
}

.default-image {
    background: url('/i/svg/icons-for-images.svg#default') 26px 26px;
    width: 26px;
    height: 26px;
}

我已尝试放入 svg 文件。

 <use style="fill:#666" xlink:href="#crop" />

但在 CSS 中我只得到一张图片

如果我再用一个

 <use style="fill:#666" xlink:href="#delete" />

我得到一张图片裁剪并相互删除。是否可以直接从css 获取每张图片？有任何背景职位吗？或者我需要将每个图像放入外部文件中？

但没有成功。

【问题讨论】：

正确检查 CSS 文件中的路径。如果您的 CSS 文件在其他目录中，您需要像背景一样使用它： url('../i/svg/icons-for-images.svg#default') 26px 26px;有关路径的更多信息，您可以阅读 - w3schools.com/html/html_filepaths.asp
你可以这样做，但是你的路径应该是相对于 CSS 文件的。众所周知，chrome 有一个关于它的错误，并使其与 html 页面相关。所以要支持所有浏览器，需要设置为绝对路径。

标签： html css svg

【解决方案1】：

目前无法使用 SVG 精灵作为背景图像。使用 svg sprite 的一种方法是内联在 HTML 中，正如您之前提到的。

附：请记住，HTML 中的内联 <svg> <use>... 在 IE 中不起作用。你需要使用这个小插件来修复它：https://github.com/jonathantneal/svg4everybody

【讨论】：