1

我制作了一个 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。我该如何编辑它？

编辑：我正在使用这个库和这个补丁来解析 SVG 中的文本标签。 在 svg 补丁中启用文本解析

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

4

3 回答 3

0

您可以在 webview 中注入 javascript 来修改svgandroid 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 回答
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 的元素，但要添加新元素。

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

于 2015-03-23T16:41:40.823 回答
-1

我使用此代码使用 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>

希望这是你想要的输出。

于 2013-09-12T06:09:08.953 回答