Base64字符串仅适用于Chrome

时间:2015-10-15 23:37:11

标签: css google-chrome firefox svg base64

我有一个base64 svg字符串,无法在FF或Safari中使用,但在Chrome中效果很好。 (最新版本)我在FF中收到的错误是:Whyyyyyy?

我的css看起来像:

.icon.icon-play {
    background-image: url("data:image/svg+xml;\a base64, PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIxMDEiIGhlaWdodD0iMTI4IiB2aWV3Qm94PSIwIDAgMTAxIDEyOCI+CjxwYXRoIGZpbGw9IiNmZmZmZmYiIGQ9Ik05OC44NTcgNjYuMjE0bC05NC44NTcgNTIuNzE0cS0xLjY0MyAwLjkyOS0yLjgyMSAwLjIxNHQtMS4xNzktMi41NzF2LTEwNS4xNDNxMC0xLjg1NyAxLjE3OS0yLjU3MXQyLjgyMSAwLjIxNGw5NC44NTcgNTIuNzE0cTEuNjQzIDAuOTI5IDEuNjQzIDIuMjE0dC0xLjY0MyAyLjIxNHoiPjwvcGF0aD4KPC9zdmc+Cg==");
}

我不知道从哪里开始,除了重新定位图像。这是我目前无法做到的。

1 个答案:

答案 0 :(得分:0)

在Firefox上工作正常(即使我留下无关的\ a)。虽然没有...但是没有...

.icon {
    background-color: black;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIxMDEiIGhlaWdodD0iMTI4IiB2aWV3Qm94PSIwIDAgMTAxIDEyOCI+CjxwYXRoIGZpbGw9IiNmZmZmZmYiIGQ9Ik05OC44NTcgNjYuMjE0bC05NC44NTcgNTIuNzE0cS0xLjY0MyAwLjkyOS0yLjgyMSAwLjIxNHQtMS4xNzktMi41NzF2LTEwNS4xNDNxMC0xLjg1NyAxLjE3OS0yLjU3MXQyLjgyMSAwLjIxNGw5NC44NTcgNTIuNzE0cTEuNjQzIDAuOTI5IDEuNjQzIDIuMjE0dC0xLjY0MyAyLjIxNHoiPjwvcGF0aD4KPC9zdmc+Cg==");
  width: 101px;
  height: 128px;
}

You seem to have some extraneous %20 characters and a \a character. %20
<div class="icon"></div>