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

Question

我制作了一个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上的示例文本消失了。如果我想要添加文本，应该怎么做。

Answer 1

我还没有在移动设备上测试过，但您可以通过添加HTML5标记contenteditable来编辑文档的任何部分，甚至是先前声明的svg文本。

＆＃13;

＆＃13;

@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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

据我所知，你可以插入HTML（也许是自定义标签），但我不太确定...请参考Document.execComand()功能并注意formatBlock描述以防您不仅需要编辑现有的svg元素，还需要添加新元素。

更新：即使我无法直接从我在默认Android浏览器的Sphere选项卡上测试的自定义应用内的webview进行测试。

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

Answer 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>

希望这是你想要的输出。