在android中编辑SVG文件中的文本答案

【问题标题】：Edit text in SVG files in android在android中编辑SVG文件中的文本
【发布时间】：2012-10-26 08:05:30
【问题描述】：

我制作了一个 SVG 文件，我可以在 android webview 中呈现它。 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 的 JavaScript，但不适用于 android。如何编辑？

编辑：我正在使用 this 库和这个补丁来解析 SVG 中的文本标签。 Enable text parsing in svg patch

我不确定如何使用它。现在 SVG 被渲染并且 SVG 上的示例文本消失了。如果我想给它加文字，应该怎么做。

【问题讨论】：

你想在运行时用android java更改它，还是javascript也可以接受？
也许添加适用于 iOS 的 javascript 会有所帮助

标签： android webview svg

【解决方案1】：

我尚未在移动设备上进行测试，但您可以通过添加 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 的元素，但添加新元素。

更新：即使我无法直接从自定义应用程序内的 web 视图测试它，我也在默认 android 浏览器的 Sphere 选项卡上测试过。

【讨论】：

这仍然留下了一个问题，即如何从运行在 android 的正常代码执行环境中的代码到 webview 内部发生的事情。
嗯...如果它在默认浏览器上运行，它应该在 android 视图上运行，不是吗？

【解决方案2】：

您可以在 webview 中注入 javascript 来修改 android java 代码中的 svg 内容。
如here所述

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 字符串（例如，将 " 替换为 \"）。

【讨论】：

【解决方案3】：

我使用此代码通过 javascript 即时更改 svg 文本的内容。

//****在 Javascript 中

var svgNS = "http://www.w3.org/2000/svg";

var  text = document.createElementNS(svgNS, "text");    

text.setAttribute("x", x_cooridnates);
text.setAttribute("y", y_cooridnates);    

text.textContent = 'Dynamic Content'; //You can add any text you want 

document.getElementById("text_group").appendChild(text);

//****在html正文部分

<svg width="1280px" height="800px">
        <g id="text_group" fill="#000000" ></g>
</svg>

希望这是你想要的输出。

【讨论】：