无法将SVG设置为CSS背景图片

Question

我有一个SVG，我想将其设置为input标签的背景图像，以便可以将图像用作单选按钮。 我一直在遵循许多指南，但似乎无济于事。 我怀疑这一定是SVG内容本身。

这是SVG：

<svg width="80px" height="80px" viewBox="473 123 80 80" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g id="face_sad" opacity="0.8" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(473.000000, 123.000000)">
    <path d="M40,0 C17.90861,-1.3527075e-15 2.705415e-15,17.90861 0,40 C-2.705415e-15,62.09139 17.90861,80 40,80 C62.09139,80 80,62.09139 80,40 C80,29.3913404 75.7857264,19.2171839 68.2842712,11.7157288 C60.7828161,4.21427361 50.6086596,6.49593051e-16 40,0 Z M40,77.6 C19.2340934,77.6 2.4,60.7659066 2.4,40 C2.4,19.2340934 19.2340934,2.4 40,2.4 C60.7659066,2.4 77.6,19.2340934 77.6,40 C77.5779535,60.7567678 60.7567678,77.5779535 40,77.6 L40,77.6 Z" id="Shape" fill="#FFFFFF" fill-rule="nonzero"></path>
    <path d="M40,49.2 C27.2,49.2 20.16,59.008 19.408,60.128 C19.1388619,60.481731 19.0872921,60.9552533 19.2739762,61.3586265 C19.4606604,61.7619997 19.8550164,62.0291441 20.2988593,62.0529021 C20.7427021,62.0766601 21.1633224,61.8531397 21.392,61.472 C22.08,60.464 28.408,51.6 40,51.6 C51.592,51.6 57.92,60.464 58.608,61.472 C58.9937796,61.9790342 59.7085433,62.096207 60.2360188,61.7388849 C60.7634943,61.3815628 60.9197839,60.6743215 60.592,60.128 C59.84,59.008 52.8,49.2 40,49.2 Z" id="Shape" fill="#FFFFFF" fill-rule="nonzero"></path>
    <ellipse id="Oval" fill="#FFFFFF" fill-rule="nonzero" cx="29.616" cy="28.8" rx="4" ry="4"></ellipse>
    <ellipse id="Oval" fill="#FFFFFF" fill-rule="nonzero" cx="50.384" cy="28.8" rx="4" ry="4"></ellipse>
    <path d="M54.76,35.04 C54.6,34.88 54.44,34.8 54.2,34.8 C53.96,34.8 53.8,34.88 53.72,35.04 C53.64,35.12 52.44,36.56 51.16,38.32 C49.48,40.8 48.6,42.72 48.6,43.92 C48.6,46.88 51.08,49.2 54.2,49.2 C57.24,49.2 59.8,46.8 59.8,43.92 C59.8,42.72 58.92,40.88 57.24,38.4 C56.04,36.56 54.76,35.12 54.76,35.04 Z" id="Shape" fill="#FFFFFF" fill-rule="nonzero"></path>
  </g>
</svg>

和我的CSS作为输入：

input#bad-choice {
  background: url(../assets/img/svgs/emoji-bad.svg);
}

我尝试过在background添加诸如no-repeat left top类的东西，甚至将其更改为background-image ，但似乎没有任何效果。 我什至尝试将其转换为数据URI，但这似乎也不起作用。 任何提示将非常感谢。 谢谢。