0

私はSVGとHTML5で遊んでいます。現在、クライアント サイトの SVG 生成の可能性を確認しています。HTML5 には<embed>、16 進数ベースのゲーム マップを (独自の「形式」で) 記述した XML ドキュメントを含む要素が提供されるという考え方です。そのドキュメントには、ドキュメントから SVG を作成する XSL ファイル (サーバー上) を指す XSLT 変換が添付されています。別の SVG ファイル (サーバーに保存されている) でマップのさまざまなヘクスを作成したかったのですが、生成された SVG マップはそれらを参照するだけでした。

これにより、「コンテキスト内」に配置されます。しかし、本当の問題は HTML5 の下から始まるので、ここに行きます。

SVG ドキュメントから他の SVG ドキュメント (またはそのフラグメント) を参照して、含まれているコンテンツをスタイリングやスクリプトで使用できるようにする方法は? 要素<use>と<image>は、ドキュメントの一部ではない「複製されたフラグメント」を追加する際にかなり制限されているようです (スクリプトの場合でも...)。<animation>SVG 1.2 からどうなるかはわかりませんが、同じだと思います。

プリミティブな C++ プリプロセッサのような#inlcude.

この規格は、意味とアクセシビリティを追加するために<defs>andの使用を奨励しています。<symbol>しかし、それを行うと（したがって、シンボルを で参照する<use>必要があります）、スタイリングがうまくいかないようです。変更されたスタイルで同じシンボルを使用する方法がわかりません。

これらすべてにより、再利用とプレゼンテーション/コンテンツの分離がはるかに困難になります。

これらの問題を回避する方法はありますか?

4

1 に答える 1

0

サポートがないため、SVG レンダラーをいくつかの一般的なブラウザーに限定して実験を続けました。また、JavaScriptが苦手なのでスタイリングだけチェックしました。

(私のテストは、場合によっては重要なローカル ファイルから行われました。)

確認したブラウザは、Internet Explorer、Chrome、Mozilla Firefox、Opera、Safari です。私はそれらをすべて最新の状態に保ちます (Opera と Safari はダウンロードしたばかりです) ので、現在のバージョンになっています。

スタイリングに関しては、次の機能を確認しました。

  1. <image>、
  2. <use>、
  3. <animation>(SVG 1.2 Tiny から、それ以外の場合は 1.1 を使用)。

3 つすべてが、メイン ファイルの CSS スタイルと参照ファイルの CSS スタイルで配置されていました。さらに、3 つのフレーバーの CSS スタイルで提供される参照ファイル:

  • xml-stylesheet処理命令、
  • <style>外部CSSファイルを参照する要素@import（処理命令と同じファイル）
  • <style>適切なコンテンツを持つ要素。

<image>メインドキュメントのスタイルを考慮したブラウザはありません（予想どおり）。それでも、IE を除くすべてのブラウザーは、参照されるドキュメントが外部ファイルに配置されている場合 (xml-stylesheetまたはによって参照されている場合@import)、そのドキュメントのスタイルを考慮していませんでした。

誰がここで悪いことをしているのかわかりません。通常、そのような場合は IE のせいにしますが、ここでは IE の動作が改善されているように見えるため、今回は他の部分が間違っている可能性があります。

また、Opera はややランダムでした。ページを更新し続けると、IE と同じように表示されることもありましたが、ほとんどは他のブラウザーと同じように表示されました (場合によってはスタイルが欠けていました)。

(<use>参照ファイルのルート<svg>要素を参照する) を使用すると、Firefox は参照ファイル スタイル (それらが提供された方法に関係なく) とメイン ファイル スタイルの両方を使用して適切に動作しました。

Opera は参照されたファイル スタイルを (それらが提供された手段に関係なく) 使用しましたが、主要なファイル スタイルは含まれていませんでした。

他のブラウザでは、参照ファイルがまったく表示されませんでした。

<animation>Operaのみで動作しました。そして、それは と同じでした<use>。他の人は、参照されたファイルをまったく表示しませんでした。

最後に、ファイル内の<use>a も参照して確認しました。<symbol>そして、すべてのブラウザが適切に動作しました。

これは、SVG ファイルの分離と再利用が (少なくとも Web 環境では) ほぼ不可能であるという悲しい結論につながります。

于 2012-10-05T08:35:22.770 に答える