2009-06-24 9 views
7

私の仕事は、2次元空間の与えられた点列に異なる種類の曲線をフィットさせるアルゴリズムを開発することです。SVGでの2Dレンダリングとズームイン

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

私のアルゴリズムの入力と出力が非常に異なる場合があるため、生成されたSVGファイルをズームインすることができます。

しかし、SVGのパスは一定の幅でしか表示できません。ズームインすると、パスの幅が広がります。私は、すべてのズームレベルで例えば1ピクセルの幅にしたいと思います。これには解決策がありますか?

また、SVG表示ポイントはありますか?はい、シンプルな生の点ですか?私はそれができないことを発見しました。

(PostScriptおよびPDFなど)

答えて

8

他の多くのベクトル形式をありがとうあなたが「ヘアライン」ストロークのために0のストローク幅を使用できるようになります。 SVGではそうではありません。しかし、私はと思ってあなたがパーセントストローク幅を使用する場合、あなたが望むことを達成することができます。基本的に、the w3c SVG specifications for details参照してください、しかし、あなたはこのような何かを行うことができるはず:

stroke-width:"1%" 

このはずのストロークに関係なく、ズームレベルの、境界の矩形の定数1%である線幅を使用して曲線。

ポイントは、SVGでサポートされていません。私は過去にPostscriptを使ってこの作業をしていましたが、私はいつもarc with a small rediusを使って小さな円を描画していました。


@Zoli:あなたのコメントの後、私はnon-scaling-stroke vector-effect in the SVG specificationに出くわしたとき、あなたはヘアラインストローク幅を使用することができますので、あなたがPostScriptに見てくださいとしていた:

vector-effect="non-scaling-stroke" 

だけにこれを追加あなたのカーブとそれは仕様によると、スケーリングに不変でなければなりません。それらの例ではlineが使用されていますが、あなたのカーブでも機能するはずです。

+0

%を使用して:ズームもまた線を広げます。 – libeako

+0

ベクター効果のプロパティをありがとうございますが、私が望むように動作しません。 ズームに対して防御するのではなく、svgドキュメント自体のトランスフォームに対してのみ防御します。 でも、これはうまくいきません。これはSVGの新機能ではないかもしれないと思います。Mozilla Firefoxはそれをサポートしていないかもしれません。 – libeako

+0

私はそれがSVG 1.2の機能だと信じていますが、それはモバイルプロファイルや小さなプロファイルでもサポートされているので、SVG 1.2の実装でサポートされるはずです。 SVG仕様の記述は、単にデバイスコンテキスト(すなわち、スクリーンスペース)でレンダリングすることになっているので、ズーム用としても機能するはずです。あなたは他のSVGビューアでその動作を確認しようとしましたか? – Naaff

0

Naaffさん、ありがとうございました。 私はfirefoxにとどまり、生成されたsvgファイル内の各アルゴリズム実行の行幅を指定します。それは私のためには十分でしょう。

1

ポイント>などの要素がSVGに現在存在していますが、SVG WGで追加されているため、将来的に含まれる可能性があります。公共のsvgメーリングリストの点>要素のニーズと要件を声をかけてお気軽に:[email protected]

問題を回避するには、例:<の行>を使用し、ドットを表示するために丸い折り返しを使用できるようにするには、長さをゼロにします。それはすべてあなたが必要とするものに依存します。 r = 0の円が適しているかもしれません。

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