問題タブ [svg-animate]
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.
google-chrome - svg:use 要素内の SVG アニメーション。Chrome ではなく Firefox で動作します
この要素を使用して、svg:use多くのノードを持つ大きな D3.js ツリー内にアニメーション SVG スピナーを埋め込みます。
1 つのノードは次のようになります。
g.nodeツリー内の多くの要素の 1 つに、必要に応じて JQuery を使用してスピナーを挿入します。
スピナーの SVG ソースは次のとおりです。
これは Firefox では完全に機能しますが、Chrome や Safari では機能しません。Chrome と Safari では、アニメーションの最初の「フレーム」だけが表示されますが、スピナーはアニメーション化されません。
この問題を解決する方法を知っている人はいますか？
ありがとう！
svg - D3.js での線のライブ描画
私は D3.js を使い始めたばかりで、ペイントで線を描くのと同じようなものを作成したいと考えています。手順は同じです。 - 画面上の点をクリックします - 移動先までドラッグして線を作成します。
私が今問題を抱えているのは、マウスを移動先にドラッグすると、マウスに合わせて線が移動するはずです。どうやってやるの？
ありがとう。
css - SVG テキスト アニメーション (CSS3) を使用したアーティファクト
Chrome 29、IE10、Safari 5.1 (Windows)、Safari 6.0.5 (Mac)、および Opera 16 のほとんどの最新ブラウザーで、テキスト アニメーション/スケーリングのアーティファクトが発生しています。Firefox (バージョン 23 でテスト済み) のみが正常に動作しています (すべてWindows では、Safari 6 を除きます)。
例：
「uf」タグにカーソルを合わせます。テキストが拡大されます。タグを離れると、縮小中に「f」が跡を残します。
バックグラウンド：
これはタグ クラウドの一部です。SVG 要素は、会社の内部ライブラリ (jsfiddle でハードコーディング) によって生成されます。このスケーリング オン ホバー機能を追加するために実装を強化しました。
transform: scale(2) を使用するか、現在のフォントサイズ遷移 (:hover -> 2em) を使用するかは問題ではありません。これらのアーティファクトなしで CSS3/SVG-Animations を使用して svg-text 要素をスケーリングする方法を見つけられませんでした。
注: これは、'f' や 't' などの特定の文字でのみ発生するようです。しかし、私が試したすべてのフォントで
私はいくつかの回避策を試しました：
レンダリングを改善するためのさまざまな CSS3 プロパティ:
または使用して
さらには
上記のすべてのブラウザで同じ効果があります。
WebKit、Presto (Opera)、Internet Explorer 10 のすべてに同じレンダリング バグがあるとは思えないため、まだバグ レポートを提出していません。私がまだ気づいていない、SVG 内のテキストをスケーリングする別の方法があることを願っています。
助けてくれてありがとう！
編集：タイプミス
javascript - ビデオの再生中に SVG アニメーションを動かす
HTML5 ビデオ タグと SVG アニメーションがあります。達成したいこと - ビデオの再生中に、アニメーションをビデオと同じ速度で動かしたい。アニメはこんな感じ
そのため、毎秒パラメータfromとtoパラメータを変更します。結果は私が達成したいものに非常に近いですが、時々（数秒に1回）小さなフリーズ/点滅があり、正確にインクリメントする方法がわからないことから来ていると思いますfromand to.
では、ビデオでスムーズに動作させるにはどうすればよいですか?
前もって感謝します
javascript - `beginElement`メソッドを持つSVG/SMIL DOM要素は?
最終的に、これは Firefox で実行されるキオスク スタイルのアプリ (jQuery 1.6.4 を使用) のためのものであるため、答えは Firefox 固有のものになる可能性があります。
アニメーション化したSVGを作ろうとしているのですが、SMILを動的に挿入してアニメーション化しようとしています。それができないことを示唆するものは何も見たことがなく、http : //srufaculty.sru.edu/david.dailey/svg/SMILorJavaScript.svgの両方が示しているようですそれができること。
私が理解している問題はbeginElement、動的に挿入されたアニメーションを開始するためにメソッドを呼び出す必要があることですが、どこにも表示されません。
ここに問題を示すフィドルがあります: http://jsfiddle.net/2pvSX/
タイトルの質問への回答に失敗した場合:
- 私は何を間違っていますか？
- 私がやろうとしていることをよりよく理解するために利用できるリソースはありますか?
これは次の問題ですか。
- SVG をどのように定義していますか?
- SMIL の作成方法を教えてください。
- どのように SVG にアクセスしていますか?
- SMIL の挿入方法を教えてください。
- まったく別の何か？
最後に、SVG をアニメーション化するより良い方法はありますか?