如何控制SVG中的填充和描边顺序？

Question

应用填充和描边的顺序会使结果产生差异。使用HTML画布可以控制订单。

这是在笔画之前应用填充时的结果： http://jsfiddle.net/YLk2F/

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);

在中风后填充时： http://jsfiddle.net/jsMX9/

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，一切都是通过SVG属性完成的，看起来像是在笔画之前应用了填充。见例如： http://jsfiddle.net/wYw86/1

<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>

是否可以颠倒此顺序，以便在SVG中的笔画后应用填充？怎么样？

Answer 1

没有直接的方法可以使用SVG 1.1（这是大多数浏览器目前所支持的）。即将推出的SVG 2规范将具有paint-order属性。

Firefox将获得版本31的支持订单支持，如果Chrome还没有它，它也应该很快拥有它。

与此同时，你总是可以在同一个位置创建2个元素，填充一个元素并抚摸另一个元素，这正是你现在用画布做的几乎所有。