問題タブ [jquery-svg]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
1 に答える
253 参照

javascript - svg 変換マトリックスは要素のストロークを変更します。これを防ぐ方法は?

私は svg-edit の修正を行っており、ユーザーが要素を選択し、ボタンをクリックして新しい寸法を要求する関数を起動し、要素がサイズ変更された寸法にサイズ変更される関数を作成しました。

しかし、問題があります。寸法のサイズが変更されると、ストロークの幅も変更されることがあります。線が細く見えます。これを防ぐ方法はありますか?

これは私の機能です:

0 投票する
1 に答える
2621 参照

javascript - バウンディングボックスを使用せずにsvgパスのディメンションを取得する

svgパスのサイズを取得してdivに表示する方法はありますか?ベジェ曲線に関しては、Webkitでバグがあるため、バウンディングボックスはオプションではありません。私はsvg-editの変更を行っています:https ://code.google.com/p/svg-edit/

これは私が現在使用しているものです。

残念ながら、バウンディングボックスは信頼できません。bbox以外のアイデアはありますか?

0 投票する
0 に答える
873 参照

javascript - javascriptを使用して重複するsvgパスを1つのパスに結合します

javascriptを使用して、2つの重複するsvgパスを1つの統合された単一パスに結合する方法はありますか?

0 投票する
1 に答える
3930 参照

javascript - viewBoxの外にあるコンテンツを切り取る方法は?

ビューボックスを非表示にするのではなく、ビューボックスの外側にあるパスをクリップする機能や方法はありますか?

ビューボックス、キャンバス領域を持つsvg-editを使用しています。そのキャンバスの外側に描かれたものはすべて隠されています。ただし、エディターの出力を収集してInkscapeなどのグラフィックエディターに貼り付けると、図面全体が表示されます。ビューボックスの外側にある図面をエディターの出力から完全に切り取ってほしい。したがって、たとえば、キャンバスの半分が外側にある円がある場合、エディタの出力は半分の円になり、円全体が半分だけ非表示になるわけではありません。

サブジェクトパス自体のジオメトリを変更したいのですが、それを非表示にするだけではありません。

私はsvg-editの変更を行っています:http ://code.google.com/p/svg-edit/

0 投票する
1 に答える
976 参照

jquery - 元のサイズでjQuery SVGに画像をロードする

jQuery SVG にイメージをロードする必要がありますが、元のサイズです。実際には、読み込まれている画像の元のサイズは不明です。

画像をロードするために使用する必要があるコードは次のとおりです。

ここで、画像のサイズを指定する必要があります。必須です。しかし、画像の実際のサイズがわからないので、画像を元のサイズと特定の場所にロードするにはどうすればよいですか?

よろしく、

ヨギ・ヤン

0 投票する
0 に答える
128 参照

jquery - jQuery SVG で、座標が期待どおりに機能しないのはなぜですか

次のコードを使用して、jQuery SVG に 2 つの画像を読み込みます。

画像が読み込まれると、次のようになります。

ここに画像の説明を入力

(ボトルの) 画像を 90 度回転します。

ここに画像の説明を入力

次のコードを使用して、(ボトル) 画像をインタラクティブに左または右に移動しようとすると、次のようになります。

以下に示すように、左 (下に移動) または右 (上に移動) ではなく、上または下に移動します。

ここに画像の説明を入力

この問題を解決する理由と方法は?

ティア

ヨギ・ヤン

0 投票する
1 に答える
812 参照

javascript - JQuery SVG: ストローク-linejoin: ラウンド

ストロークラインに丸みを帯びた結合を持たせようとしています。以下のコードが機能しないのはなぜですか?

この JSFiddleを参照してください。

この OReilly のドキュメントによると、必要なスタイル プロパティと値はstroke-linejoinandroundです。JQuery-SVG のドキュメントによると、次のようになります。

SVG でダッシュ (-) を含む追加設定は、ダッシュなしでキャメルケースで記述する必要があります。

だから、なぜそれが機能していないのかわかりません。

ありがとう

更新:ここで JSFiddle をフォークしました。SVG XML を出力するときに、キャメル ケース プロパティがダッシュ付きのプロパティに変換されていないようです。今、それを修正する方法を考え出すだけです。出力している SVG XML は次のとおりです。

0 投票する
2 に答える
814 参照

jquery - Keith Wood JQuery SVG: clone() の後に change() が機能しない

このJSFiddle (以下のコード) では、単にパスを複製してその設定を変更しようとしています。ただし、コードを実行すると、rect2 にメソッドがsetAttribute()定義されていないというエラーが表示されます。

ただし、代わりに、このメソッドを rect1 で実行すると、この JSFiddlechange()のようにエラーは発生しません。したがって、完全なクローンが生成されないという点で、クローン方法に問題があると思われます。

私は何を間違っていますか?拡張機能に問題がある場合、適切な回避策は何ですか? ありがとう

これまでの私の努力:

  • 複製する前に alert(rect1) を実行すると、「[object SVGPathElement]」と表示されます。
  • 複製後に alert(rect2) を実行すると、「[object SVGPathElement].
  • alert(rect1.setAttribute) を実行すると、「function setAttribute() {[native code]}」と表示されます
  • alert(rect2.setAttribute) を実行すると、「未定義」と表示されます。
0 投票する
1 に答える
329 参照

jquery - Keith Wood の Jquery SVG プラグイン: アニメーションなしで変換しますか?

Keith Wood の SVG Jquery プラグインを使用して、アニメーション機能を使用せずにパスを移動/スケーリング/回転する方法はありますか? すぐに変更したいのですが、アニメーション機能には不要なオーバーヘッドがあると思います。

私が実際に行っているのは、パスを作成し、それを複製してから、回転/移動して、繰り返すことです。(たとえば、時計に複数の目盛りを描画するなど)。

ありがとう