web-dev-qa-db-ja.com

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

私は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>

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

javascriptpathsvgd3.js
35
ballaw

SVG仕様 からの関連行 充填パス に関して：

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

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

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

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

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

56
mbostock

私は答えに賛成票を投じましたが、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>
4
SYK