外部文件中的SVG图标 [英] SVG icons from external file
问题描述
<?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中，我可以轻松获得它
I have there buttons: default, delete, crop. In html I can get it easily
<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>
但是我需要使用诸如背景之类的按钮.
But I need use this buttons like background.
我尝试过这样:
.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文件.
I have tried put in svg file.
<use style="fill:#666" xlink:href="#crop" />
但是在CSS中我只能得到一张图片
But in CSS I get only one picture
如果我再用一次
<use style="fill:#666" xlink:href="#delete" />
我得到一张照片并互相删除.
是否可以直接从css获取每个图像?
有任何背景职位?还是我需要将每个图像都放在外部文件中?
I get one picture crop and delete on each other.
Is it possible directly get from css each image?
With any background position? Or I need each image put in external file?
但是没有成功.
推荐答案
目前尚不能将SVG精灵用作背景图像.您可以使用svg精灵的单一方式，它是HTML的内联方式，您之前已经提到过.
It is not possible for now, to use SVG sprites as background images. A single way how you can use svg sprites, it is inline in HTML, what you mentioned before.
P.S.请记住，HTML中的内联<svg> <use>...在IE中不起作用.您需要使用这个小插件来解决此问题: https://github.com/jonathantneal/svg4everybody
P.S. Please keep in mind, that inline <svg> <use>... in HTML is not working in IE. You need to use this small plugin for fixing that: https://github.com/jonathantneal/svg4everybody
这篇关于外部文件中的SVG图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
