SVG 将“填充”与“描边颜色”混淆答案

【问题标题】：SVG confuses 'fill' with 'stroke-color'SVG 将“填充”与“描边颜色”混淆
【发布时间】：2015-03-23 06:21:07
【问题描述】：

我有一个封闭的<path>，绘制成星形。问题很简单但令人沮丧：当我尝试通过属性或 CSS 填充其内部时，唯一改变的是笔触颜色。我一直盯着路径细节看，但看不出有什么特别之处。即使是最基本的教程也展示了如何填充封闭路径，所以它必须是可能的。

Here's a JSBin. 我请求一个蓝色填充，但得到一个蓝色描边。请注意，我尝试了来自 <defs> 的两个模板和一个非模板等效项。

【问题讨论】：

第一个 </g> 关闭了什么？
抱歉，编辑错误：提取了很多不相关的内容。修复并更改了 JSBin 链接。

标签： css svg

【解决方案1】：

SVG 工作正常。只是明星本身仅限于那个乐队。（你的星星中没有中间部分供 svg 填充）

将 d 属性更改为：

M 15.64,213.212 117.92,105.865 -33.174,154.959 C -1.035,4.834 0.876,9.824 4.876,12.729 3.999,2.906 9.335,3.181 13.613,0.704 L 137.124，-79.434 137.124,79.434 C 1.944,11.126 4.107,1.684 6.194,1.684 4.124,1.684 4.124,1.684 4.194,1.684 6.265 ，1.684 2.588,0 5.167，-0.802 7.348，-2.387 4，-2.906 5.911，-729 L 378.44,319.077 496.44,319.077 496.359,213.212 C 3.679，-3.302 5.065,8.462 3.538，-13.164 -1.528，-13.164 -1.528，-4.702 -5.683，-8.061 -10.6，-8.571 L 331.671,175.143 267.425,30.279 C -2.004，-432 -11.483，-7232 -11.427，-7.432 -11.944,7.432 -4.944,0 -9.423,2.944,0 -9.423,2.914 -11.427,7.433 L 180.329,175.143 22.702 ,191.477 c -4.917,0.51 -9.072,3.869 -10.6,8.571 -1.528,4.702 -0.141,9.862 3.538,13.164 z

你应该明白我的意思

【讨论】：

非常感谢指正，也请原谅我的不理解，但是你的路径做了什么以前没有的？据我了解，路径是行，而不是空格的定义。
因此，您所拥有的是原始路径中的外部路径和内部路径。内部路径限制了形状占据中间部分。我所做的只是采用矢量绘图程序（inkscape）并删除内部路径以允许填充内部部分。您可能缺少的是绘制路径的“笔”可以抬起并再次放回另一个位置以再次开始绘制。路径不仅仅是一条线，而是线集合描述的结果对象。我希望这更有意义
也许更简单的解释是，你认为的“中风”实际上不是中风。你得到的是一个蓝色的星形，上面有一个稍小的星形孔。