SVG塗りつぶしのパス - 折り返してオーバーラップが塗りつぶされていない場合

Question

私は、フラッシュで書かれた描画ツールを維持しています。これは、ハイライターツールのデータを厚い塗りつぶしのフリーハンド/ポイントツーポイントライン。たとえば、ユーザーが水平線を描いた場合、パスは左から右へのポイントのシーケンス、次に10ピクセル下のライン、原点の下の10ピクセルに戻るための逆順の同じシーケンス、次にパスです閉じた

別のツールは、点のjsonリストをsvgパスに変換することによって、フラッシュのデータを定期的にラスタライズします。パスコマンドは、「M 123,456 l 1,2,3,5 -2、-5 ...」のようになり、形状の完全な外縁を表します。ストロークはなく、塗りは不透明です。0.4

ギリシャシンボルアルファのように、重なっている1つの線が描画されていると、重なっている部分が塗りつぶされていないことに気付きました。私はそれが本当の蛍光ペンと同じくらい不透明になることを期待していました。

この動作はSVGで仕様どおりですか？それとも、私が使っている図書館のバグでしょうか？設計上、もしそれがそれ自身の上を横切った場合、徐々に不透明になる不透明なハイライターラインの一部をレンダリングするために私はどのような代替戦術を使用できますか？

Iがちょうどその単一のパス要素と、この奇妙な挙動は

を生じる、予想されるように互いの上に描かれた二つの別個のラインは（SVGドキュメントが交差2つのパス要素を含む）より不透明になるないことに注意してください次に動作を示すSVGドキュメントの例を示します。コメントに関してはこれ（トップのテキストボックスにコードを貼り付け、虫眼鏡のアイコンをクリックしてSVGを理解し、ブラウザが必要です。）http://www.rapidtables.com/web/tools/svg-viewer-editor.htmのようなものの上に可視化することができる

<svg width="680" height="465" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
 
     <g> 
 
     <path d="M 283,29 l -2,2 -1,1 -5,4 -5,4 -4,3 -4,2 -3,2 -4,3 -6,3 -4,2 -5,3 -6,5 -3,2 -4,2 -1,1 -5,2 -4,3 -4,2 -3,1 -3,2 -3,2 -4,1 -8,3 -3,1 -5,1 -6,1 -1,0 -5,1 -4,0 -5,0 -6,1 -6,0 -7,0 -10,0 -7,0 -7,0 -5,0 -5,0 -9,0 -2,0 -3,0 -8,0 -3,0 -6,0 -4,0 -4,0 -3,-1 -3,-1 -2,-2 -2,-1 -3,-4 0,-1 -2,-3 -2,-4 -1,-2 -1,-3 -1,-5 0,-6 0,-4 0,-4 0,-4 0,-5 0,-5 0,-4 1,-4 3,-4 3,-4 2,-3 2,-3 2,-2 1,-1 3,-1 2,-1 2,-1 8,-3 7,-1 5,-1 4,0 3,0 3,0 2,0 2,0 2,0 2,0 3,0 2,0 3,0 2,0 5,0 3,0 1,0 2,0 3,1 4,2 3,0 2,2 4,2 4,2 3,1 2,2 2,2 3,2 4,3 3,3 2,2 3,3 2,3 2,2 2,3 1,3 2,3 2,3 3,3 2,3 1,3 2,3 2,3 2,3 2,3 1,3 1,3 2,2 2,2 2,3 1,3 3,3 2,3 1,2 2,1 1,2 2,1 2,2 3,1 2,1 2,2 2,1 3,1 3,1 2,2 3,1 4,2 4,2 3,1 3,1 3,1 3,0 2,1 2,1 2,0 4,1 4,1 4,0 3,0 3,0 4,0 2,0 4,0 3,0 1,0 2,0 3,0 3,0 2,0 2,0 3,0 2,0 2,0 1,0 1,-1 1,0 2,-1 2,0 2,-1 1,0 1,-1 1,0 1,-1 1,0 1,0 0,25 -1,0 -1,0 -1,1 -1,0 -1,1 -1,0 -2,1 -2,0 -2,1 -1,0 -1,1 -1,0 -2,0 -2,0 -3,0 -2,0 -2,0 -3,0 -3,0 -2,0 -1,0 -3,0 -4,0 -2,0 -4,0 -3,0 -3,0 -4,0 -4,-1 -4,-1 -2,0 -2,-1 -2,-1 -3,0 -3,-1 -3,-1 -3,-1 -4,-2 -4,-2 -3,-1 -2,-2 -3,-1 -3,-1 -2,-1 -2,-2 -2,-1 -3,-1 -2,-2 -2,-1 -1,-2 -2,-1 -1,-2 -2,-3 -3,-3 -1,-3 -2,-3 -2,-2 -2,-2 -1,-3 -1,-3 -2,-3 -2,-3 -2,-3 -2,-3 -1,-3 -2,-3 -3,-3 -2,-3 -2,-3 -1,-3 -2,-3 -2,-2 -2,-3 -3,-3 -2,-2 -3,-3 -4,-3 -3,-2 -2,-2 -2,-2 -3,-1 -4,-2 -4,-2 -2,-2 -3,0 -4,-2 -3,-1 -2,0 -1,0 -3,0 -5,0 -2,0 -3,0 -2,0 -3,0 -2,0 -2,0 -2,0 -2,0 -3,0 -3,0 -4,0 -5,1 -7,1 -8,3 -2,1 -2,1 -3,1 -1,1 -2,2 -2,3 -2,3 -3,4 -3,4 -1,4 0,4 0,5 0,5 0,4 0,4 0,4 0,6 1,5 1,3 1,2 2,4 2,3 0,1 3,4 2,1 2,2 3,1 3,1 4,0 4,0 6,0 3,0 8,0 3,0 2,0 9,0 5,0 5,0 7,0 7,0 10,0 7,0 6,0 6,-1 5,0 4,0 5,-1 1,0 6,-1 5,-1 3,-1 8,-3 4,-1 3,-2 3,-2 3,-1 4,-2 4,-3 5,-2 1,-1 4,-2 3,-2 6,-5 5,-3 4,-2 6,-3 4,-3 3,-2 4,-2 4,-3 5,-4 5,-4 1,-1 2,-2" style="stroke-linecap: round; stroke-linejoin: round; fill: #0000CC; fill-opacity: 0.4; fill-rule: evenodd; stroke: none" /> 
 
    
 
     <path d="M 583,29 l -2,2 -1,1 -5,4 -5,4 -4,3 -4,2 -3,2 -4,3 -6,3 -4,2 -5,3 -6,5 -3,2 -4,2 -1,1 -5,2 -4,3 -4,2 -3,1 -3,2 -3,2 -4,1 -8,3 -3,1 -5,1 -6,1 -1,0 -5,1 -4,0 -5,0 -6,1 -6,0 -7,0 -10,0 -7,0 -7,0 -5,0 -5,0 -9,0 -2,0 -3,0 -8,0 -3,0 -6,0 -4,0 -4,0 -3,-1 -3,-1 -2,-2 -2,-1 -3,-4 0,-1 -2,-3 -2,-4 -1,-2 -1,-3 -1,-5 0,-6 0,-4 0,-4 0,-4 0,-5 0,-5 0,-4 1,-4 3,-4 3,-4 2,-3 2,-3 2,-2 1,-1 3,-1 2,-1 2,-1 8,-3 7,-1 5,-1 4,0 3,0 3,0 2,0 2,0 2,0 2,0 3,0 2,0 3,0 2,0 5,0 3,0 1,0 2,0 3,1 4,2 3,0 2,2 4,2 4,2 3,1 2,2 2,2 3,2 4,3 3,3 2,2 3,3 2,3 2,2 2,3 1,3 2,3 2,3 3,3 2,3 1,3 2,3 2,3 2,3 2,3 1,3 1,3 2,2 2,2 2,3 1,3 3,3 2,3 1,2 2,1 1,2 2,1 2,2 3,1 2,1 2,2 2,1 3,1 3,1 2,2 3,1 4,2 4,2 3,1 3,1 3,1 3,0 2,1 2,1 2,0 4,1 4,1 4,0 3,0 3,0 4,0 2,0 4,0 3,0 1,0 2,0 3,0 3,0 2,0 2,0 3,0 2,0 2,0 1,0 1,-1 1,0 2,-1 2,0 2,-1 1,0 1,-1 1,0 1,-1 1,0 1,0 0,25 -1,0 -1,0 -1,1 -1,0 -1,1 -1,0 -2,1 -2,0 -2,1 -1,0 -1,1 -1,0 -2,0 -2,0 -3,0 -2,0 -2,0 -3,0 -3,0 -2,0 -1,0 -3,0 -4,0 -2,0 -4,0 -3,0 -3,0 -4,0 -4,-1 -4,-1 -2,0 -2,-1 -2,-1 -3,0 -3,-1 -3,-1 -3,-1 -4,-2 -4,-2 -3,-1 -2,-2 -3,-1 -3,-1 -2,-1 -2,-2 -2,-1 -3,-1 -2,-2 -2,-1 -1,-2 -2,-1 -1,-2 -2,-3 -3,-3 -1,-3 -2,-3 -2,-2 -2,-2 -1,-3 -1,-3 -2,-3 -2,-3 -2,-3 -2,-3 -1,-3 -2,-3 -3,-3 -2,-3 -2,-3 -1,-3 -2,-3 -2,-2 -2,-3 -3,-3 -2,-2 -3,-3 -4,-3 -3,-2 -2,-2 -2,-2 -3,-1 -4,-2 -4,-2 -2,-2 -3,0 -4,-2 -3,-1 -2,0 -1,0 -3,0 -5,0 -2,0 -3,0 -2,0 -3,0 -2,0 -2,0 -2,0 -2,0 -3,0 -3,0 -4,0 -5,1 -7,1 -8,3 -2,1 -2,1 -3,1 -1,1 -2,2 -2,3 -2,3 -3,4 -3,4 -1,4 0,4 0,5 0,5 0,4 0,4 0,4 0,6 1,5 1,3 1,2 2,4 2,3 0,1 3,4 2,1 2,2 3,1 3,1 4,0 4,0 6,0 3,0 8,0 3,0 2,0 9,0 5,0 5,0 7,0 7,0 10,0 7,0 6,0 6,-1 5,0 4,0 5,-1 1,0 6,-1 5,-1 3,-1 8,-3 4,-1 3,-2 3,-2 3,-1 4,-2 4,-3 5,-2 1,-1 4,-2 3,-2 6,-5 5,-3 4,-2 6,-3 4,-3 3,-2 4,-2 4,-3 5,-4 5,-4 1,-1 2,-2" style="stroke-linecap: round; stroke-linejoin: round; fill: #0000CC; fill-opacity: 0.4; fill-rule: nonzero; stroke: none" /> 
 
     </g> 
 
    </svg>

：DOC各シンボルのfill-ruleは異なりますが、基本的に塗りつぶしたパスを使用して2つのアルファシンボルを描画します。外観には大きな違いはありませんが、何度も何度もクロスオーバーすると、出力に差があります - すべての例では、塗りつぶされた領域がすでに塗りつぶされた領域を戻ったときに暗くなるような、同じパスの塗りつぶし領域

Answer 1

私は今あなたの問題を理解しています。残念ながらfill-rule: nonzeroはあなたのパスが自己交差するだけではなく（通常は問題ありません）、左手側で交差しているので、あなたの場合は助けになりません。これにより、フィルルール "非ゼロ"アルゴリズムが崩れます。

実際には単純な解決策もありません。私が提案できる最適な点は、ハイライターパスが水平変曲点に当たったとき（つまり、水平方向に変わるとき）に検出し、そのパスを2つのパス（またはサブパス）に分割することです。