在Vaadin中获取SVG子元素作为文本

Question

我在带有特定ID的div中使用javascript创建了一个SVG元素。我的主要目标是获得SVG图像，让用户下载它。

因此，我的想法可能是绝对错误的，那就是访问Div元素(我使用的是Vaadin 23(，使用container.getElement()，获取子元素，也就是我的SVG，然后使用svgElement.getOuterHTML()来获取字符串并将其保存在某个地方。我可以看到元素，我知道它在那里，但当我从vaadin打印容器元素时，它没有任何子元素。

我的情况：

<div class="chart-container" id="chart-div-02250ca9-3b1b-4d09-aeb2-f38c4c797fc9">
<div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" role="group" style="width: 100%; height: 100%; overflow: visible;">
...
</svg>
</div>
</div>

我从content.getElement().getOuterHTML()得到的，其中content是我的div，ID为

<div id="chart-div-02250ca9-3b1b-4d09-aeb2-f38c4c797fc9" class="chart-container">
</div>

我错过了什么？

如果这是预期的行为，您将如何获取SVG元素？我尝试了JS，然后将结果返回到Java，但Futures和所有同步的东西都一团糟。

编辑(添加对最终目标的澄清(：最终目标如下：我想添加一个功能，用户可以在其中下载渲染的SVG作为图像。但问题是；构建"；SVG，所以我不能在执行之前将其保存在某个地方。

Answer 1

Vaadin不会自动将客户端创建的子元素与JavaScript或模板内容同步到服务器。这只是因为从性能的角度来看，添加这样的实现确实会有问题，而很少需要它。

您所能做的就是将您的组件实现为LitTemplate。这允许您使用@Id注释从模板中注入选定的元素

@JsModule("./my-template.ts")
@Tag("my-template")
public class MyTemplate extends LitTemplate {
@Id("svg")
Element svgElement;
...
}

而"；frontend/my template.ts"；有点像

import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
@customElement('my-template')
export class MyTemplate extends LitElement {
render() {
return html`
<div class="chart-container" id="chart-div-02250ca9-3b1b-4d09-aeb2-f38c4c797fc9">
<div>
<svg id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" role="group" style="width: 100%; height: 100%; overflow: visible;">
...
</svg>
</div>
</div>';
}
}

然而，请注意，在Vaadin中没有对Svg元素的更深层次的支持，所以我不确定您能用它实现什么。

所以最终的问题是，你为什么需要它？这个问题的答案可能会为你揭示其他途径。

编辑：事实证明，您想要以编程方式编写SVG，然后下载它，原始问题的答案不会有帮助。需要使用另一种方法。

一种可能的途径是使用字符串片段组成SVG服务器端。这里是一个随机折线的例子。使用这种方法，您可以一直在服务器端保存SVG数据，并且可以将其保存在一个字符串中，可以轻松下载。

Html createChart(String color) {
Random random = new Random();
List<Integer> data = random.ints(300, -100, 100).boxed()
.collect(Collectors.toList());
String svg = "<div><svg class="uk-animation-stroke" style="width: 100%; height: 100%; --uk-animation-stroke: 100000;" preserveAspectRatio="none" viewBox="0 -100 600 200"><polyline points="";
int index = 0;
for (int number : data) {
svg += index + "," + number + " ";
index += 2;
}
svg += "" style="stroke-width: 1;fill:none;stroke:" + color
+ ""></polyline></svg></div>";
Html chart = new Html(svg);
chart.getElement().getStyle().set("height", "100px");
return chart;
}