如何在数据URL中设置SVG元素的样式？

Question

我有一个通过数据URL加载的内联SVG，我想从父元素继承填充颜色。

可以通过CSS /方式吗？

代码如下：

color-blue { color: #00f; }
/* 
SVG Contents:
Notice the fill="currentColor" attribute, which works for normal 
inline SVGs but not here.

<?xml version="1.0" encoding="utf-8"?>
  <svg xmlns="http://www.w3.org/2000/svg" width="5" height="5" viewBox="0 0 12 5">
  <circle stroke="none" fill="currentColor" cx="2.5" cy="2.5" r="2.5"/>
</svg>
*/

.line-dots {
  background: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" width="5" height="5" viewBox="0 0 12 5"><circle stroke="none" fill="currentColor" cx="2.5" cy="2.5" r="2.5"/></svg>') repeat-x;
}

.dot-color-red { color: #f00; }
.dot-c

<div class="line-dots dot-color-red">Demo 1</div>
<div class="line-dots dot-color-blue">Demo 2</div>