如何控制SVG中填充和笔划的顺序？

填充和笔划的应用顺序会对结果产生影响。使用HTML画布可以控制顺序

以下是在笔划之前应用填充时的结果：

当在冲程后应用填充时：

使用SVG时，一切都是通过SVG属性完成的，看起来填充是在笔划之前应用的。例如，见：

你好，世界！

---

是否可以颠倒此顺序，以便在SVG中的笔划后应用填充？如何实现？

使用SVG1.1（这是大多数浏览器目前正在实现的）无法直接实现这一点。即将推出的SVG2规范将有一个属性

Firefox将从31版开始提供油漆订单支持，如果Chrome还没有，它也应该很快提供

---

同时，您可以始终在同一位置创建两个元素，填充其中一个元素并对另一个元素进行笔划，这与您现在使用canvas所做的工作非常相似。

stroke总是在填充SVG后应用。您看到的效果可能是因为您尚未定义SVG单元，并且浏览器没有正确猜测您的意图。谢谢。你是对的。我的代码中有一个bug（画布示例使用2像素宽，svg使用1像素宽）。我已经用正确的代码和图片更新了这个问题。您是否有任何参考资料支持您的说法，即在填写SVG后始终应用笔划？看起来确实是这样，但我在SVG的技术规范中找不到这一点。我不认为在这里，当涉及到SVG时，你可以从“执行顺序”的角度来考虑这一点。在画布上，这些都是实际的绘画操作——当然，这两种不同的操作顺序会影响结果。如果微调SVG中的笔划宽度并没有达到预期的效果，那么我认为您可以通过实际引入“顺序”来实现，即使用两个文本元素，将笔划应用于其中一个，将填充应用于另一个，然后将它们放置在彼此的顶部。是以Chrome 35发货的参考油漆订单，请参阅。

ctx.fillStyle = options.fillColor;
    ctx.fillText(options.text, options.x, options.y);    
    ctx.strokeStyle = options.outlineColor;
    ctx.lineWidth = options.outlineWidth;
    ctx.strokeText(options.text, options.x, options.y);

ctx.strokeStyle = options.outlineColor;
ctx.lineWidth = options.outlineWidth;
ctx.strokeText(options.text, options.x, options.y);
ctx.fillStyle = options.fillColor;
ctx.fillText(options.text, options.x, options.y);    

<svg id="SvgjsSvg1000" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
    <text id="SvgjsText1006" font-family="times new roman" font-size="40pt" stroke="#ff0000" stroke-width="2" fill="#000000" transform="translate(100 100)">
        <tspan id="SvgjsTspan1008" style="font-weight: bold; font-style: italic; font-variant: small-caps; text-decoration: underline;">Hello World!</tspan>
    </text>
</svg>