SVGでの2Dレンダリングとズームイン

Question

私の仕事は、さまざまな種類の曲線を2次元空間の特定の点列に適合させるアルゴリズムを開発することです。

アルゴリズムをテストできるように、結果を表示するためにSVGを選択しました。いくつか問題があります。

私のアルゴリズムの入力と出力は非常に異なる可能性があるため、生成されたSVGファイルをズームインして表示できることが不可欠です！

ただし、SVGのパスは特定の幅でのみ表示できます。ズームインすると、パスの幅が広くなります。たとえば、すべてのズームレベルで幅を1ピクセルにしたいと思います。これに対する解決策はありますか？

また：SVGはポイントを表示できますか？はい、単純な、生のポイント。できないことがわかりました。

ありがとう

Answer 1

他の多くのベクター形式（PostScriptやPDFなど）では、<！> quot; hairline <！> quot;に0のストローク幅を使用できます。ストローク。 SVGではそうではありません。ただし、ストローク幅の割合を使用すると、望むものを達成できると思います 。 詳細についてはw3c SVG仕様を参照してください。ただし、基本的には、次のようなことができます：

stroke-width:"1%"

これにより、ズームレベルに関係なく、境界矩形の一定の1％の線幅で曲線がストロークされます。

ポイントに関しては、SVGはそれらをサポートしていません。 （PostScriptを使用して）過去にこれを行ったときは、常に小さなリディアスの付いた円弧で小さな円を描きます（必要に応じて塗りつぶしてドットを作成できます）。

---

@Zoli：コメントの後、 SVG仕様の非スケーリングストロークベクトル効果：

vector-effect="non-scaling-stroke"

これを曲線に追加するだけで、仕様に従ってスケーリングに不変でなければなりません。彼らの例ではlineを使用していますが、曲線でも機能するはずです。

Answer 2

<！> lt; point <！> gt;はありません。現在SVGの要素またはそのようなものですが、それを追加することはSVG WGで議論されているため、将来的に含まれる可能性があります。 <！> lt; point <！> gt;のニーズや要件については、お気軽にお声をおかけください。パブリックsvgメーリングリストへの要素：www-svg@w3.org。

回避策は、たとえば<！> lt; line <！> gt;を使用することです。要素を追加し、長さをゼロにします。必要に応じて、丸いラインキャップを使用してドットを表示できます。それはすべてあなたがこれを必要としているものに依存します。 r = 0の円がより適している可能性があります。

値が「non-scaling-stroke」の「vector-effect」プロパティは、ストロークが拡大縮小しないようにするために使用する必要があるものです。 「ベクトル効果」がネイティブでサポートされていない場合、ストロークが適切にスケーリングされるようにするJavaScriptソリューションを実装するのはそれほど難しくありません。 Opera 9.5+はネイティブにサポートしています。

Answer 3

助けてくれてありがとう。 私はFirefoxにとどまり、生成されたsvgファイルの行幅をアルゴリズム実行ごとに指定すると思います。それで十分です。