5

Chrome で js コンソールを使用して Web ページから html svg を取得する方法はありますか? Svg コードは svg タグでラップされています。そして、svgをローカルマシンに保存することは可能ですか? またはそれを画像に変換しますか？また、svg データ (チャート/グラフなど) を Google ドキュメントや Excel にインポートすることは可能ですか?

4

5 に答える 5

3

外部ライブラリだけでなく、ブラウザによって提供される完全な dom および js オブジェクト (xpath プロセッサなど) にもアクセスできます。

したがって、必要なのは、問題の svg 要素を一意に識別することだけです。

その場でjqueryをインポートし、ページ上のすべてのsvg要素を選択することから始めます。これは、調査中のページを読み込んでコンソールを開いたことが前提です。コマンド プロンプトで次のステートメントを入力する必要があります。

var e = document.createElement('script');
e.setAttribute('type','text/javascript'); 
e.setAttribute('src','http://code.jquery.com/jquery-1.10.2.min.js'); 
(document.getElementsByTagName('head'))[0].appendChild(e);

$('svg');

最後のコマンドは、svg 要素を含む dom フラグメントを提供します。

上記のバニラ JavaScript コマンドは、jquery ライブラリを参照するスクリプト要素を現在の Web ページに追加します。jqueryは dom の処理を​​大幅に簡素化しますが、厳密に言えば必須ではありません (fr32c の回答を参照)。

完了したら、生成されたばかりのコンソール出力のコンテキスト メニューの [要素パネルで表示] エントリを選択します。ページ DOM の折りたたみ階層表現内の要素にリダイレクトされます。選択した svg 要素のコンテキスト メニューから [html としてコピー] を選択します。クリップボードのデータを svg ファイルとして保存します。

ノート

chrome (29) と Opera (12) では、jquery がコンソールにインポートされ、要素クエリが削減されます$('svg')(この情報については Ir0nm に感謝します)。

于 2013-09-10T14:56:59.597 に答える
0

あなたの質問のパート1に答える：

コンソールで svg タグを見つけようとしている場合は、次のようにして取得できます。 document.getElementsByTagName('svg')[0] ページに複数の svg が埋め込まれている場合は、[0] を変更 (または削除) して正しい部分をキャッチします。そこから、右クリックしてその svg 要素を要素パネルに表示し、そこから xhtml としてコピーできます。(私はこのページでその行を試しました: http://www.w3schools.com/html/html5_svg.asp )

于 2013-09-10T14:58:16.470 に答える
0

私にとってうまくいく解決策（Mac上）：

1 - ロゴをデスクトップ (任意のブラウザー) にドラッグします。

場合によっては、ページのコードにより、.SVG ファイルを Web サイトからデスクトップまたは選択したフォルダーに直接ドラッグできます。超簡単！

ここに画像の説明を入力

2 - PDF に出力 (Safari、Firefox)

これにはもう少し作業が必要ですが、現在は常に機能する可能性があります。[印刷] ダイアログで、[PDF] > [PDF として保存] に移動します。プレビューでは、ロゴがエクスポートされるかどうかを確認できます (機能しない場合もあります)。エクスポート後、選択したベクター編集アプリでファイルを開くことができます。

3 - Chrome のインスペクターからドラッグ アンド ドロップする

これは、絶望的な場合に機能する可能性があります。ロゴ要素を調べて、その名前にカーソルを合わせます。サムネイル付きの小さなウィンドウが表示され、ロゴが内側に表示されます。小さなロゴをクリックして、フォルダにドラッグします。

ここに画像の説明を入力

上記のような他の解決策があるかもしれません (コードをコピーして何らかの方法で変換します - 3 番目の Web サイトの例では、コードが次のようになっているため、これが機能しないことを示しました。または、SVG Crowbarも時々動作します (時には動作しない場合もあります。ダウンロードボックスが重複しています）。

于 2020-11-16T21:51:52.727 に答える
0

Webkit ブラウザーでは、SVG 要素を右クリックして [要素の検査] を選択できます。これにより、Web インスペクタ ツールが開きます。通常、そこから svg ノードを右クリックして「HTML としてコピー」するか、コンソール タイプから$0.outerHTML

次に、SVG をローカル ドキュメントに貼り付けます。次に、 phantomjsを使用してラスタライズできます。

古いバージョンの Opera (v12 以前) には、SVG 画像を右クリックして「画像をコピー」する独自の機能がありました。これにより、クリップボードにラスター画像が配置されます-（私はこの機能を以前に悪用しました。）-免責事項：私はMacを使用していますが、Windowsでは異なる場合があります。

于 2013-09-13T21:42:19.770 に答える