javascript - 閉じられていないSVGパスが閉じているように見える

Question

私はd3でいくつかのものを書いていますが、奇妙な問題に遭遇しました。閉じられたパスは「Z」文字で終わりますが、Zを含めるかどうかに関係なく、作成するすべてのパスは閉じます（そして塗りつぶされます）。仕様からコピーされた例とは別にても、これは起こります。例えば：

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

私は問題が何であるかについて困惑しています。洞察をいただければ幸いです。

score 64 · Accepted Answer

塗りつぶし操作は、サブパスの最後のポイントをサブパスの最初のポイントに接続するために追加の「closepath」コマンドがパスに追加されたかのように塗りつぶし操作を実行することによって、開いているサブパスを塗りつぶします。

したがって、塗りつぶしに関する限り、最後に暗黙の「Z」があります。ただし、ストロークの場合、暗黙のクロージャはないため、明示的に「Z」を追加しない限り、最後のポイントを最初のポイントに接続するストロークは描画されません。

ストロークのみを適用する場合は、CSSを使用して塗りつぶしを無効にします。

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

（あなたはあなた自身の質問に答えたようですが、他の人はまだ説明が役立つかもしれないと思いました。）

score 10 · Accepted Answer

私は答えに賛成しましたが、svgをcanvasに変換しようとして、svgパスがいっぱいになったり閉じたりしないようにしたい場合、cssがオプションにならないことがあります。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>

2 に答える 2