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

,536,913,632 10

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 개의 요소를 만들 수 있고, 하나를 채우고 나머지는 다른 캔버스로 만들 수 있습니다. 이제는 캔버스로 수행하는 작업과 거의 같습니다.