1

Android WebView でレンダリングできる SVG ファイルを作成しました。SVG ファイルにはテキストも含まれています。

@font-face {
  font-family: "Arvo";
  font-style: normal;
  font-weight: 400;
  src: local("Arvo"), url("http://fonts.gstatic.com/s/arvo/v8/J0GYVYTizO1mjpT3aOcSbQ.woff2") format("woff2"), url("http://fonts.gstatic.com/s/arvo/v8/WJ6D195CfbTRlIs49IbkFw.woff") format("woff");
}
<svg width="1280px" height="800px">
  <text id="text1_x5F_left_1_" transform="matrix(1 0 0 1 18.333 32.96)">
    <tspan x="0" y="0" font-family="'Arvo'" font-size="21">DDDDDDDDDDDDDDDDDDDDDDD</tspan>
    <tspan x="0" y="25.2" font-family="'Arvo'" font-size="21">DDDDDDDDDDDDDDDDDDDDDDD</tspan>
    <tspan x="0" y="50.4" font-family="'Arvo'" font-size="21">DDDDDDDDDDDDDDDDDDDDDDD</tspan>
    <tspan x="0" y="75.6" font-family="'Arvo'" font-size="21">D</tspan>
  </text>
</svg>

実行時にテキストを編集したい。また、iPhone では動作するが Android では動作しない JavaScript もあります。どうすれば編集できますか?

編集:このライブラリとこのパッチを使用して、SVG のテキスト タグを解析しています。 svg パッチでテキスト解析を有効にする

使い方がよくわかりません。現在、SVG がレンダリングされ、SVG にあったサンプル テキストはなくなりました。テキストを追加したい場合は、どのようにすればよいですか。

4

3 に答える 3

0

携帯端末ではテストしていませんが、HTML5 タグを追加することで、ドキュメントの任意の部分を編集可能にすることができますcontenteditable。以前に宣言された svg のテキストも編集可能です。

@font-face {
  font-family: "Arvo";
  font-style: normal;
  font-weight: 400;
  src: local("Arvo"), url("http://fonts.gstatic.com/s/arvo/v8/J0GYVYTizO1mjpT3aOcSbQ.woff2") format("woff2"), url("http://fonts.gstatic.com/s/arvo/v8/WJ6D195CfbTRlIs49IbkFw.woff") format("woff");
}
#editable {
  border: 1px;
  border-style: dashed;
}
<div id="editable" contenteditable="true">
  <svg width="1280px" height="800px">
    <text id="text1_x5F_left_1_" transform="matrix(1 0 0 1 18.333 32.96)">
      <tspan x="0" y="0" font-family="'Arvo'" font-size="21">DDDDDDDDDDDDDDDDDDDDDDD</tspan>
      <tspan x="0" y="25.2" font-family="'Arvo'" font-size="21">DDDDDDDDDDDDDDDDDDDDDDD</tspan>
      <tspan x="0" y="50.4" font-family="'Arvo'" font-size="21">DDDDDDDDDDDDDDDDDDDDDDD</tspan>
      <tspan x="0" y="75.6" font-family="'Arvo'" font-size="21">D</tspan>
    </text>
  </svg>
</div>

私の知る限り、HTML（およびおそらくカスタムタグ）を挿入できますが、そうであるかどうかはよくわかりません.. Document.execComand()関数を参照しformatBlock、編集するだけでなく、既存の svg の要素ですが、新しい要素を追加します。

更新: カスタム アプリ内の webview から直接テストすることはできませんが、デフォルトの Android ブラウザーの Sphere タブでテストしました。 スクリーンショット

于 2015-03-23T16:41:40.823 に答える
0

WebView に JavaScript を挿入してsvg、Android Java コードからコンテンツを変更できます。ここで
説明したように

String newText="new text 1";
String javascript="javascript:document.getElementsByTagName("tspan")[0].innerHTML='"+newText+"';"
webView.loadUrl(javascript);

String newText="new text 2";
String javascript="javascript:document.getElementsByTagName("tspan")[1].innerHTML='"+newText+"';"
webView.loadUrl(javascript);

...

String newText="new text 4";
String javascript="javascript:document.getElementsByTagName("tspan")[3].innerHTML='"+newText+"';"
webView.loadUrl(javascript);

もちろん、JavaScript に挿入する必要がある Java 文字列を適切にエスケープする必要があります (たとえば、次のように置き換えます") \"。

于 2015-03-27T10:22:00.650 に答える