Question

<?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每个图像获取？有任何背景位置？或者我需要将每个图像放在外部文件中？

但是没有成功。

Answer 1

现在不可能将SVG精灵用作背景图像。一个单一的方法如何使用svg sprite，它是HTML内联，你之前提到过。

P.S。请记住，HTML中的内联<svg> <use>...无法在IE中运行。您需要使用此小插件来修复：https://github.com/jonathantneal/svg4everybody

来自外部文件的SVG图标

1 个答案: