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

填充和描边应用的顺序会影响结果。使用HTML画布可以控制订单。如何控制SVG中的填充和笔画的顺序？

下面是结果，当填充是中风之前应用： 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);

enter image description here

当填充在中风后应用： 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);

enter image description here

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

enter image description here

是否有可能使填充在SVG中风后应用于扭转这种秩序？怎么样？

来源

2014-05-16 morpheus

填写SVG后始终应用笔画。您看到的效果可能是因为您尚未定义SVG单元，并且浏览器未正确猜测您的意图。 –

谢谢。你是对的。我的代码中存在一个错误（我使用了2像素宽度的canvas实例和1像素宽度的svg）。我用正确的代码和图像更新了问题。 – morpheus

你有没有任何参考来支持你的说法，即在填入SVG后总是应用笔画？看起来确实如此，但我无法在SVG的技术规格中找到它。 – morpheus

有没有直接的方法来做到这一点与SVG 1.1（这是大多数浏览器目前吸引）即将到来的SVG 2规范将具有paint-order属性。

Firefox将从版本31开始支持绘画顺序支持，如果Chrome尚未具备该功能，Chrome应该尽快提供支持。

与此同时，您可以在相同的位置创建2个元素，填充一个元素并且对另一个元素进行描边，这与您现在使用canvas进行的操作几乎相同。

来源

2014-05-18 04:46:10

涂料订单在Chrome 35中发货，请参阅http://blog.chromium.org/2014/04/chrome- 35-β-更显影剂control.html。 –

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

回答

相关问题