Question

使用Raphael，我注意到如果我尝试使用0.9和0.2作为径向焦点在圆上应用径向填充，则无法绘制径向填充。

paper.circle(50,300,20).attr({"fill":"r(0.5,0.1)#f00-000"});
paper.circle(100,300,20).attr({"fill":"r(0.9,0.2)#f00-000"}); // <-- fails
paper.circle(150,300,20).attr({"fill":"r(0.9,0.3)#f00-000"});

我在这里设置了一个小提琴，做了一个10x10网格，而（0.9,0.2）是唯一一个失败的网格。

我想了解原因。 http://jsfiddle.net/ENMry/2/

Answer 1

这不是Raphael库的问题，但很可能是JS SVG渲染。您可以在没有Raphael库的情况下仅使用JavaScript和SVG标记重复相同的问题。见example at jsBin

我将您的示例更改为具有11x11网格（从0.0到1.0）的更大圆圈，并在顶部单独放置一行以显示焦点移动的方式。请参阅example at jsBin。

使用浏览器控制台（Chrome中的ctrl + shift + J），您可以检查DOM元素。为我们的白色元素（第一行中的第二个）设置了以下标记：

<radialGradient id="2r_0.1_0.2__f00-_000" fx="0.1" fy="0.2" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
    <stop offset="0%" stop-color="#ff0000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></stop>
    <stop offset="100%" stop-color="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></stop>
</radialGradient>

<circle cx="175" cy="50" r="30" fill="url(#2r_0.1_0.2__f00-_000)" stroke="#000" opacity="1" fill-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 1; fill-opacity: 1;">
</circle>

这个MDN Gradients tutorial解释了径向渐变的工作原理。

如果我理解正确，径向渐变是用5个数据和stop标记定义的：

其中是辐射点：例如cx="0.25" cy="0.25" r="0.25"。它们定义了位置和渐变结束的位置。如果未设置cx且cy位于元素的中间位置（与值0.5或50％相同; cx=0, cy=0表示左上角），r为1或100 ％。在我们的例子中，辐射从圆的中间开始，并在其边缘结束。
stop标记定义哪些颜色应位于特定位置。
其中是焦点（焦点）点：在我们的案例中fx="0.1" fy="0.2"。标准说：fx和fy定义径向渐变的焦点。将绘制渐变，使0％梯度停止映射到（fx，fy）。

如果你想象一个圆圈周围的矩形，fx="0.1" fy="0.2"就在左上角的某个地方。本教程说： 如果焦点移到前面描述的圆之外，则无法正确渲染渐变，因此将假定光点位于圆的边缘。 如果根本没有给出焦点，则假定它与中心点位于同一位置。

第一行中的第一个圆圈为fx="0.0" fy="0.2"，且不在辐射圈内。所以斑点设置在边缘：左边，中间。

“有问题”的白色圆圈有fx="0.1" fy="0.2"，此点在（辐射）圆的边缘完全。而渲染失败了。 fx="0.9" fy="0.2"，fx="0.2" fy="0.1"和fx="0.2" fy="0.9"也是如此。

按照相同的逻辑，我们应该有另外4个白圈：

fx="0.8" fy="0.1"
fx="0.8" fy="0.9"
fx="0.1" fy="0.8"
fx="0.9" fy="0.8"

但它们会正确呈现。

如果绘制圆形和网格，则可以轻松查看所有“有问题”的点。

所以，我不知道这是否是一些舍入问题或其他问题。无论如何，它可能是一个错误。我发现其中一个与radial rendering有关，但它并不完全相同。

BTW，FireFox和IE10没有问题。

注意：我提交了一个问题322487

为什么Raphael辐射填充坐标的这种组合会失败？

1 个答案: