如何使用 CSS 中的 SVG 设置 SVG 圆形填充？答案

【问题标题】：How to set SVG circle fill with SVG from CSS?如何使用 CSS 中的 SVG 设置 SVG 圆形填充？
【发布时间】：2014-07-22 22:18:54
【问题描述】：

所以我尝试了以下变化：

circle {
    stroke: black;
    //fill: brown;
    fill-opacity: .5;
    fill:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHhtbG5zOnhsaW5rPSdodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rJyB3aWR0aD0nNScgaGVpZ2h0PSc1Jz4KCTxkZWZzPgoJCTxyYWRpYWxHcmFkaWVudCBpZD0nZ2xvdycgY3g9JzUwJScgY3k9JzUwJScgcj0nNTAlJyBmeD0nNTAlJyBmeT0nNTAlJz4KCQkJPHN0b3Agb2Zmc2V0PScxMCUnIHN0eWxlPSdzdG9wLWNvbG9yOiMzZDNkM2Q7Jy8+CgkJCTxzdG9wIG9mZnNldD0nODAlJyBzdHlsZT0nc3RvcC1jb2xvcjojM2QzZDNkOycvPgoJCQk8c3RvcCBvZmZzZXQ9JzEwMCUnIHN0eWxlPSdzdG9wLWNvbG9yOiNmZmZmZmY7IHN0b3Atb3BhY2l0eToxOycgLz4KCQk8L3JhZGlhbEdyYWRpZW50PgoJPC9kZWZzPgoJPHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsbD0ndXJsKCNnbG93KScvPgo8L3N2Zz4=');
}

但我无法使用预定义的 svg 图像获得正确（或任何填充）的 SVG 圆圈。是否可以从 CSS 或如何从 js 中做到？

【问题讨论】：

似乎用图像填充 SVG 的常用方法是通过 Patterns，你看过吗？像这样的东西：stackoverflow.com/questions/3796025/…
这个SO question/answer专门处理圆圈内的模式。

标签： javascript css svg geometry

【解决方案1】：

填充值必须是颜色或绘制服务器（渐变或图案）。恐怕你不能只给它一个这样的图像。

http://www.w3.org/TR/SVG11/painting.html#FillProperty

【讨论】：