1

.txtファイルからテキストを取得して表示するSVGを作成しようとしています。これが私のこれまでのコードです。

<svg width="10cm" height="3cm" viewBox="0 0 1000 300" version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  <text x="100" y="200" font-size="45" fill="red" >
    <tref xlink:href="sensors.txt"/>
  </text>

</svg>

なぜ機能しないのかわかりません。

4

2 に答える 2

1

機能しない要素を修正するため<tref>に、Ajaxを介して目的のテキストファイルをロードするスクリプトをSVGの最後に追加できます。

<svg width="10cm" height="3cm" viewBox="0 0 1000 300" version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <text x="100" y="200" font-size="45" fill="red" >
    <tref xlink:href="sensors.txt"/>
  </text>
  <script type="text/javascript">
    var trefs = document.getElementsByTagName("tref");
    for (var i=0; trefs[i]; i++) {
      var xhr = new XMLHttpRequest();
      xhr.open("GET",trefs[i].getAttributeNS("http://www.w3.org/1999/xlink","href"),false);
      xhr.send("");
      trefs[i].parentNode.replaceChild(document.createTextNode(xhr.responseText),trefs[i]);
    }
  </script>
</svg>

もちろん、これはテキストファイルを参照する場合にのみ機能します。これはスタイル的に洗練され、必要に応じて、のようxlink:href="#textId'な外部ファイルからの参照IDに対しても、のようなIDを介したテキストの参照に対して機能するようにすることができますxlink:href="other.svg#textId"。

<tref>ブラウザが、必要な場合にのみスクリプトを実行するために必要なすべての側面をすでにサポートしているかどうかを、適切にスニッフィングできるかどうかはわかりません。

于 2013-01-06T22:26:15.930 に答える
1

私が間違っていなければ、あなたのコードは仕様に対応しています。

要素は一般的に実装されていないようtrefです（少なくともFirefox 17では実装されていません）。Chrome 23では、仕様からの例を非常にうまくレンダリングしますが、外部ファイルで定義されたテキストでは機能しないようです（プレーンテキストファイルでも外部svg defでも）。絶対リンクと相対リンクの両方を試し、ファイルプロトコルを含めました。

サーバー上にある場合は、PHPなどのスクリプト言語を使用してテキストを挿入する必要があると思います。そうしないと、かなり困難になります。

仕様のこの要素の詳細：
http ：//www.w3.org/TR/SVG/text.html#TRefElement
https://developer.mozilla.org/en-US/docs/SVG/Element/tref

于 2013-01-06T02:42:07.500 に答える