如何将动态生成的 SVG 包含到 Vaadin UI？答案

【问题标题】：How to include a dynamically generated SVG to a Vaadin UI?如何将动态生成的 SVG 包含到 Vaadin UI？
【发布时间】：2013-07-24 07:12:39
【问题描述】：

我想知道在 Vaadin 7.0.5 中是否可以在 vaadin UI 中包含 SVG 图形，并且无需任何附加组件。

我目前正在使用此代码

StreamResource ressourceSVG = new StreamResource(source, "graphe.svg");

Embedded embedded = new Embedded("SVG", ressourceSVG);
embedded.setType(Embedded.TYPE_OBJECT);
embedded.setMimeType("images/svg+xml");

verticalLayout.addComponent(embedded);
setContent(verticalLayout);

这样，什么都没有发生……只有“SVG”文本在浏览器中的出现。

我在这个主题上找到的唯一topic 是 3 年前的，在书中没有找到线索。

在 API 中仅存在接口：elemental.svg 但它并没有真正的帮助......

如果你们有任何线索......会很棒

【问题讨论】：

会发生什么？什么没有发生？
@nexus 唯一发生的是 SVG 文本的外观。在生成的 HTML 中，我只有由该元素生成的“SVG”文本。
如果您使用 TYPE_IMAGE 或 TYPE_BROWSER 而不是 TYPE_OBJECT 会发生什么？
还没有尝试 TYPE_BROWSER，但是 TYPE_IMAGE 已被弃用，我尝试了 vaadin Class Image ，它是 TYPE_IMAGE 的替代品，但它没有用。由于 TYPE_BROWSER 也已被弃用，我将尝试使用应该相同的 ,ew BrowserFrame 类
browserFrame 类使其工作。

标签： jakarta-ee svg vaadin

【解决方案1】：

因此，似乎答案是，要在 Vaadin 7 中显示 SVG，应该使用 BrowserFrame 来显示 SVG 资源。

使用类似下面的东西，其中 sourceSVG 是一个包含 SVG 数据的流源。

StreamResource ressourceSVG = new StreamResource(sourceSVG, "graphe.svg");

BrowserFrame embedded = new BrowserFrame("SVG", ressourceSVG);

verticalLayout.addComponent(component);
verticalLayout.addComponent(embedded);
setContent(verticalLayout);

加载网页后不得不重新加载框架，但它终于工作了

【讨论】：

【解决方案2】：

实际上，至少在7.1.7 版本中，您可以直接将Embedded 与SVG 一起使用。 Book 中甚至还有一个示例，尽管它处理的是 ThemeResource：

// A resource reference to some object
Resource res = new ThemeResource("img/reindeer.svg");

// Display the object
Embedded object = new Embedded("My SVG", res);
object.setMimeType("image/svg+xml"); // Unnecessary
layout.addComponent(object);

但是，StreamResources 也可以正常工作，至少使用以下 sn-p：

Embedded image = new Embedded();
image.setMimeType("image/svg+xml"); //also unnecessary here :p
layout.addComponent(image);
StreamSource source = //define your source
image.setSource(new StreamResource(source, "image.svg"));

（请注意，如果您需要重新生成图像，您必须为StreamResource 提供一个全新的、唯一的filename 值）

【讨论】：

感谢您的提示，我会在更新我的 vaadin 应用程序时尽量记住它