(RaphaelJS) - 如何填充路径的内部？答案

【问题标题】：(RaphaelJS) - How to Fill the inside of a path?(RaphaelJS) - 如何填充路径的内部？
【发布时间】：2012-11-19 14:01:27
【问题描述】：

我有 RaphaelJS 库的路径，我似乎无法通过填充来更改其颜色。

var mypage = ScaleRaphael('mainContainer', 1000, 1000);
 mypage.setStart();
mypath.path('M794.33,21.5l152.3-0.76L946,21.5v-0.22l1.39,0.01l-1.17,206.61l-0.04,0.3l-0.15,0.27l-0.04,0.07l-0.18,0.35l-0.34,0.2 L786.4,321.59l-159.22,92.27l-2.12,1.18l-0.07-2.36v-1v-0.28l0.18-0.26l42.1-97.5l42.26-97.43l21.13-48.71l21.21-48.68 L794.33,21.5z M794.33,21.5l-41.46,97.76l-20.76,48.87l-20.84,48.83l-41.68,97.67l-41.78,97.59l0.18-0.54v1l-2.11-1.18 l159.08-92.46l159.23-92.21l-0.52,0.54l0.03-0.07l-0.14,0.57l2.04-206.6l1.39,0.01v0.22l0.13,0.77l-0.69,0L794.33,21.5z')
    .attr({"type":"path","stroke":"none","fill":"blue"});

路径创建正确，但填充属性只使笔触蓝色而不是填充，我做错了什么？

【问题讨论】：

你从哪里得到的路径？它的形状像一个中风，如果你这样做.attr({"type":"path","stroke":"blue","fill":"none", "stroke-width":0.5});你就会明白发生了什么。
这是Illustrator的输出，我能做些什么来填充里面？

标签： svg raphael vector-graphics

【解决方案1】：

你的路径的形状像一个笔划，通过删除从第二个M开始的所有内容来填充修改路径：

var stage = Raphael('stage',1000, 1000);
var path = stage.path('M794.33,21.5l152.3-0.76L946,21.5v-0.22l1.39,0.01l-1.17,206.61l-0.04,0.3l-0.15,0.27l-0.04,0.07l-0.18,0.35l-0.34,0.2 L786.4,321.59l-159.22,92.27l-2.12,1.18l-0.07-2.36v-1v-0.28l0.18-0.26l42.1-97.5l42.26-97.43l21.13-48.71l21.21-48.68 L794.33,21.5z')
    .attr({"type":"path","stroke":"none","fill":"blue"});

http://jsfiddle.net/YzMCG/

【讨论】：

完美答案。谢谢。

【解决方案2】：

这里有一个很好的解释，建议在 CSS 中添加一个透明填充，以隐藏彩色填充并使其看起来像一条路径：

Raphael Js can't fill path with Image

【讨论】：