SVG图像没有动画为背景css

Question

我是使用SVG的新手，并使用http://svgcircus.com/

创建了这个

当我在浏览器（chrome）中打开svg文件时，它是动画的，但当我将其作为背景导入时 - 它似乎没有动画。

#hero{
height: 500px;
width: 500px;
    background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IS0tIEdlbmVyYXRvcjogU1ZHIENpcmN1cyAoaHR0cDovL3N2Z2NpcmN1cy5jb20pIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIGlkPSJTVkctQ2lyY3VzLTVjMzI0ODU3LTlmODUtM2EwNC03ZGM0LTk5MWZjMDUyNjk0YiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgbWVldCI+PGNpcmNsZSBpZD0iYWN0b3JfNiIgY3g9Ijg2IiBjeT0iNjEiIHI9IjEiIG9wYWNpdHk9IjEiIGZpbGw9IiMwMkZGRjEiIGZpbGwtb3BhY2l0eT0iMSIgc3Ryb2tlPSIjMDJGRkYxIiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZS1vcGFjaXR5PSIxIiBzdHJva2UtZGFzaGFycmF5PSIiPjwvY2lyY2xlPjxjaXJjbGUgaWQ9ImFjdG9yXzUiIGN4PSI2MiIgY3k9IjM5IiByPSIxIiBvcGFjaXR5PSIxIiBmaWxsPSIjMDJGRkYxIiBmaWxsLW9wYWNpdHk9IjEiIHN0cm9rZT0iIzAyRkZGMSIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2Utb3BhY2l0eT0iMSIgc3Ryb2tlLWRhc2hhcnJheT0iIj48L2NpcmNsZT48Y2lyY2xlIGlkPSJhY3Rvcl80IiBjeD0iODgiIGN5PSIxOSIgcj0iMS41IiBvcGFjaXR5PSIxIiBmaWxsPSIjRkZBMzc0IiBmaWxsLW9wYWNpdHk9IjEiIHN0cm9rZT0iI0ZGQTM3NCIgc3Ryb2tlLXdpZHRoPSIwIiBzdHJva2Utb3BhY2l0eT0iMSIgc3Ryb2tlLWRhc2hhcnJheT0iIj48L2NpcmNsZT48Y2lyY2xlIGlkPSJhY3Rvcl8zIiBjeD0iMTEiIGN5PSIxNCIgcj0iMSIgb3BhY2l0eT0iMSIgZmlsbD0iIzAyRkZGMSIgZmlsbC1vcGFjaXR5PSIxIiBzdHJva2U9IiMwMkZGRjEiIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlLW9wYWNpdHk9IjEiIHN0cm9rZS1kYXNoYXJyYXk9IiI+PC9jaXJjbGU+PGNpcmNsZSBpZD0iYWN0b3JfMiIgY3g9IjMyIiBjeT0iMzEiIHI9IjAuNSIgb3BhY2l0eT0iMSIgZmlsbD0iI0ZGQTM3NCIgZmlsbC1vcGFjaXR5PSIxIiBzdHJva2U9IiNGRkEzNzQiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLW9wYWNpdHk9IjEiIHN0cm9rZS1kYXNoYXJyYXk9IiI+PC9jaXJjbGU+PGNpcmNsZSBpZD0iYWN0b3JfMSIgY3g9IjEyIiBjeT0iNTciIHI9IjEiIG9wYWNpdHk9IjEiIGZpbGw9IiMwMkZGRjEiIGZpbGwtb3BhY2l0eT0iMSIgc3Ryb2tlPSIjMDJGRkYxIiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZS1vcGFjaXR5PSIxIiBzdHJva2UtZGFzaGFycmF5PSIiPjwvY2lyY2xlPjxzY3JpcHQgdHlwZT0idGV4dC9lY21hc2NyaXB0Ij48IVtDREFUQVsoZnVuY3Rpb24oKXt2YXIgYWN0b3JzPXt9O2FjdG9ycy5hY3Rvcl8xPXtub2RlOmRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCJTVkctQ2lyY3VzLTVjMzI0ODU3LTlmODUtM2EwNC03ZGM0LTk5MWZjMDUyNjk0YiIpLmdldEVsZW1lbnRCeUlkKCJhY3Rvcl8xIiksdHlwZToiY2lyY2xlIixjeDoxMixjeTo1NyxkeDoyLGR5OjI3LG9wYWNpdHk6MX07YWN0b3JzLmFjdG9yXzI9e25vZGU6ZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoIlNWRy1DaXJjdXMtNWMzMjQ4NTctOWY4NS0zYTA0LTdkYzQtOTkxZmMwNTI2OTRiIikuZ2V0RWxlbWVudEJ5SWQoImFjdG9yXzIiKSx0eXBlOiJjaXJjbGUiLGN4OjMyLGN5OjMxLGR4OjEsZHk6Mjcsb3BhY2l0eToxfTthY3RvcnMuYWN0b3JfMz17bm9kZTpkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgiU1ZHLUNpcmN1cy01YzMyNDg1Ny05Zjg1LTNhMDQtN2RjNC05OTFmYzA1MjY5NGIiKS5nZXRFbGVtZW50QnlJZCgiYWN0b3JfMyIpLHR5cGU6ImNpcmNsZSIsY3g6MTEsY3k6MTQsZHg6MixkeToyNyxvcGFjaXR5OjF9O2FjdG9ycy5hY3Rvcl80PXtub2RlOmRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCJTVkctQ2lyY3VzLTVjMzI0ODU3LTlmODUtM2EwNC03ZGM0LTk5MWZjMDUyNjk0YiIpLmdldEVsZW1lbnRCeUlkKCJhY3Rvcl80IiksdHlwZToiY2lyY2xlIixjeDo4OCxjeToxOSxkeDozLGR5OjM0LG9wYWNpdHk6MX07YWN0b3JzLmFjdG9yXzU9e25vZGU6ZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoIlNWRy1DaXJjdXMtNWMzMjQ4NTctOWY4NS0zYTA0LTdkYzQtOTkxZmMwNTI2OTRiIikuZ2V0RWxlbWVudEJ5SWQoImFjdG9yXzUiKSx0eXBlOiJjaXJjbGUiLGN4OjYyLGN5OjM5LGR4OjIsZHk6Mjcsb3BhY2l0eToxfTthY3RvcnMuYWN0b3JfNj17bm9kZTpkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgiU1ZHLUNpcmN1cy01YzMyNDg1Ny05Zjg1LTNhMDQtN2RjNC05OTFmYzA1MjY5NGIiKS5nZXRFbGVtZW50QnlJZCgiYWN0b3JfNiIpLHR5cGU6ImNpcmNsZSIsY3g6ODYsY3k6NjEsZHg6MixkeToyNyxvcGFjaXR5OjF9O3ZhciB0cmlja3M9e307dHJpY2tzLnRyaWNrXzI9KGZ1bmN0aW9uKHQsaSl7aT0oZnVuY3Rpb24obil7cmV0dXJuLjU+bj8yKm4qbjotMSsoNC0yKm4pKm59KShpKSUxLGk9MD5pPzEraTppO3ZhciBfPXQubm9kZTswLjE+PWk/Xy5zZXRBdHRyaWJ1dGUoIm9wYWNpdHkiLGkqKHQub3BhY2l0eS8wLjEpKTppPj0wLjk/Xy5zZXRBdHRyaWJ1dGUoIm9wYWNpdHkiLHQub3BhY2l0eS0oaS0wLjkpKih0Lm9wYWNpdHkvKDEtMC45KSkpOl8uc2V0QXR0cmlidXRlKCJvcGFjaXR5Iix0Lm9wYWNpdHkpfSk7dHJpY2tzLnRyaWNrXzE9KGZ1bmN0aW9uKHQsaSl7aT0oZnVuY3Rpb24obil7cmV0dXJuLjU+bj8yKm4qbjotMSsoNC0yKm4pKm59KShpKSUxLGk9MD5pPzEraTppO3ZhciBfPXQubm9kZTswLjE+PWk/Xy5zZXRBdHRyaWJ1dGUoIm9wYWNpdHkiLGkqKHQub3BhY2l0eS8wLjEpKTppPj0wLjk/Xy5zZXRBdHRyaWJ1dGUoIm9wYWNpdHkiLHQub3BhY2l0eS0oaS0wLjkpKih0Lm9wYWNpdHkvKDEtMC45KSkpOl8uc2V0QXR0cmlidXRlKCJvcGFjaXR5Iix0Lm9wYWNpdHkpfSk7dmFyIHNjZW5hcmlvcz17fTtzY2VuYXJpb3Muc2NlbmFyaW9fMT17YWN0b3JzOiBbImFjdG9yXzEiLCJhY3Rvcl8yIiwiYWN0b3JfMyJdLHRyaWNrczogW3t0cmljazogInRyaWNrXzIiLHN0YXJ0OjAsZW5kOjF9XSxzdGFydEFmdGVyOjAsZHVyYXRpb246MjYwMCxhY3RvckRlbGF5OjMwMCxyZXBlYXQ6MCxyZXBlYXREZWxheToxMDAwfTtzY2VuYXJpb3Muc2NlbmFyaW9fMj17YWN0b3JzOiBbImFjdG9yXzQiLCJhY3Rvcl81IiwiYWN0b3JfNiJdLHRyaWNrczogW3t0cmljazogInRyaWNrXzIiLHN0YXJ0OjAuNDIsZW5kOjF9LHt0cmljazogInRyaWNrXzIiLHN0YXJ0OjAuNDIsZW5kOjF9LHt0cmljazogInRyaWNrXzIiLHN0YXJ0OjAuNDIsZW5kOjF9LHt0cmljazogInRyaWNrXzIiLHN0YXJ0OjAsZW5kOjF9XSxzdGFydEFmdGVyOjEyMDAwLGR1cmF0aW9uOjI2MDAsYWN0b3JEZWxheTowLHJlcGVhdDowLHJlcGVhdERlbGF5OjI3MDB9O3ZhciBfcmVxQW5pbUZyYW1lPXdpbmRvdy5yZXF1ZXN0QW5pbWF0aW9uRnJhbWV8fHdpbmRvdy5tb3pSZXF1ZXN0QW5pbWF0aW9uRnJhbWV8fHdpbmRvdy53ZWJraXRSZXF1ZXN0QW5pbWF0aW9uRnJhbWV8fHdpbmRvdy5vUmVxdWVzdEFuaW1hdGlvbkZyYW1lLGZuVGljaz1mdW5jdGlvbih0KXt2YXIgcixhLGksZSxuLG8scyxjLG0sZixkLGssdztmb3IoYyBpbiBhY3RvcnMpYWN0b3JzW2NdLl90TWF0cml4PVsxLDAsMCwxLDAsMF07Zm9yKHMgaW4gc2NlbmFyaW9zKWZvcihvPXNjZW5hcmlvc1tzXSxtPXQtby5zdGFydEFmdGVyLHI9MCxhPW8uYWN0b3JzLmxlbmd0aDthPnI7cisrKXtpZihpPWFjdG9yc1tvLmFjdG9yc1tyXV0saSYmaS5ub2RlJiZpLl90TWF0cml4KWZvcihmPTAsbT49MCYmKGQ9by5kdXJhdGlvbitvLnJlcGVhdERlbGF5LG8ucmVwZWF0PjAmJm0+ZCpvLnJlcGVhdCYmKGY9MSksZis9bSVkL28uZHVyYXRpb24pLGU9MCxuPW8udHJpY2tzLmxlbmd0aDtuPmU7ZSsrKWs9by50cmlja3NbZV0sdz0oZi1rLnN0YXJ0KSooMS8oay5lbmQtay5zdGFydCkpLHRyaWNrc1trLnRyaWNrXSYmdHJpY2tzW2sudHJpY2tdKGksTWF0aC5tYXgoMCxNYXRoLm1pbigxLHcpKSk7bS09by5hY3RvckRlbGF5fWZvcihjIGluIGFjdG9ycylpPWFjdG9yc1tjXSxpJiZpLm5vZGUmJmkuX3RNYXRyaXgmJmkubm9kZS5zZXRBdHRyaWJ1dGUoInRyYW5zZm9ybSIsIm1hdHJpeCgiK2kuX3RNYXRyaXguam9pbigpKyIpIik7X3JlcUFuaW1GcmFtZShmblRpY2spfTtfcmVxQW5pbUZyYW1lKGZuVGljayk7fSkoKV1dPjwvc2NyaXB0Pjwvc3ZnPg==);
}

<div id="hero">
  <h1>Hello, stack! </h1>
</div>