2012-04-18 13 views
24

私はd3でいくつかのものを書いていますが、私は奇妙な問題に遭遇しました。閉じられたパスは 'Z'文字で終わりますが、Zを含めるかどうかにかかわらず、すべてのパスは閉じられます(そして塗りつぶします)。 specからコピーされた例題と孤立していても、これは起こります。例:クローズされていないSVGパスが閉じているようです

<svg> 
    <path d="M 40 60 L 10 60 L 40 42.68 M 60 60 L 90 60 L 60 42.68"/> 
</svg> 

私は問題が何であるかについて困惑しています。私はどんな洞察にも感謝します。 filling pathsに関する

+2

OK、問題は、パスを閉じるように見えるようになっていたことでした。 したがって、SVG作業の定型的なCSSには、次のものを含める必要があります。 パス{ fill:none; } – ballaw

+0

早めに質問して申し訳ありません。 – ballaw

+2

今日知っておいたので、この質問をしてうれしいです。 –

答えて

40

SVG specificationから該当する行、:

フィル動作は、追加の「closepath」は、コマンドが最後の点を接続するパスに追加されたかのように、充填操作を行うことにより、オープンサブパスを充填サブパスの最初の点を持つサブパス

だから、限りが懸念されるを埋めるように、末尾に暗黙の「Z」があります。ただし、ストロークの場合、暗黙のクロージャはありません。したがって、明示的に "Z"を追加しない限り、最後のポイントと最初のポイントを結ぶストロークは描画されません。

あなただけの塗りつぶしを無効にするためにCSSを使用し、ストロークを適用する場合:

path { 
    fill: none; 
    stroke: #000; 
    stroke-width: 1.5px; 
} 

(私はあなたがあなた自身の質問に答え、私は他の人がまだ有益な説明を見つけるかもしれないと思っご覧ください。)
2

私は答えに投票しましたが、svgをキャンバスに変換しようとするときにcssがオプションではなく、svgパスの埋め込みや終了を防止したい場合があります。 cssのソリューションに相当しますが、CSSを使用していません。

<svg fill="white" fill-opacity="0" stroke="#000" stroke-width="1.5"> 
    <path d="M 40 60 L 10 60 L 40 42.68 M 60 60 L 90 60 L 60 42.68"/> 
</svg> 
+3

ここでは "none"も入力できませんか? –

関連する問題