Question

我只使用棘轮集合中的一个图标（http://goratchet.com/components/）。我想知道我是否可以将图标的SVG定义直接嵌入我的＆＃39; .css＆＃39;文件。

即。类似......

.tick {
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml ... *svg-definition-in-here* ...
}

ratchicons.svg感兴趣的图标代码是......

<glyph glyph-name="check" unicode="&#xe810;" d="m857 537l-81 83l-354-372l-135 128l-81-83l216-211l435 455z" horiz-adv-x="1000" />

Answer 1

如果您将字形数据嵌入到路径中并对其进行转换，那么就可以了解它。

＆＃13;

html, body, svg {
  width : 100%;
  height: 100%;
  display: block;
  margin: 0;
  border: 0;
}

＆＃13;

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -900 900 900">
  <path transform="scale(1, -1)" d="m857 537l-81 83l-354-372l-135 128l-81-83l216-211l435 455z"/>
</svg>

＆＃13;

然后您需要做的就是嵌入它...

＆＃13;

.tick {
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -900 900 900"><path transform="scale(1, -1)" d="m857 537l-81 83l-354-372l-135 128l-81-83l216-211l435 455z"/></svg>')
}

＆＃13;

<div class="tick"></div>

＆＃13;

Answer 2

罗伯特·朗森的答案的另一种选择是使用除了IE之外的大多数现代浏览器都支持的<foreignObject>方法。

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/ratchet/2.0.2/css/ratchet.css" rel="stylesheet" />
<svg width="400px" height="300px" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">

  <foreignObject width="100" height="50">

    <body xmlns="http://www.w3.org/1999/xhtml">
      <span class="icon icon-check"></span>
    </body>

  </foreignObject>

</svg>

＆＃13;

<foreignObject> on MDN

使用单个棘轮图标作为内联css

2 个答案: