在JSF 2.0页面中开始使用SVG图形对象

Question

我想要做的是创建具有交互式SVG内容的网页。我使用Batik作为Java桌面应用程序来渲染我的SVG并收集像mouseclick这样的UI事件。现在我想以相同的方式在我的JSF（Primefaces）Web应用程序中使用这些SVG图形文件。

试图开始，我发现这不起作用：

＆lt; h：graphicImage id =“gloob”value =“images / sprinkverks.svg”                                     alt =“Graphic Goes Here”/＆gt;

我不介意做一些阅读以起到学习曲线。一些谷歌搜索没有发现任何有用的东西，这有点令人惊讶。

我所做的建议我必须使用f：verbatim标记执行此操作，就像我手动编写HTML一样。然后我必须添加一些脚本来捕获SVG事件并将它们反馈回AJAX代码。如果我必须尽我所能，但我希望有一种更容易和自动化的方式。

所以问题是：

1. 如何让图像首先渲染？
2. 如何将DOM事件从页面的SVG部分返回到支持bean？

非常感谢任何指示。

Answer 1

  

如何让图像首先渲染？

<h:graphicImage>只会呈现HTML <img>元素。这不适用于当前浏览器中的SVG对象。您need <object type="image/svg+xml">。从JSF 1.2开始，<f:verbatim>丑陋no need。在Facelets上，您可以像普通HTML一样内联EL：

<object type="image/svg+xml" data="#{bean.svgUrl}">

然而，standard JSF implementation不提供呈现<object>的UI组件，因此您必须以普通的HTML方式执行此操作。我已经在PrimeFaces，OpenFaces和RichFaces进行了检查，但没有人提供针对嵌入SVG对象的组件。 PrimeFaces的电影对象有<p:media>和RichFaces <a4j:mediaOutput>，但就是这样。

---

  

如何将DOM事件从页面的SVG部分返回到支持bean？

最好的办法是编写一些委托给隐藏的JSF ajax表单的JavaScript。将必要的数据写入隐藏字段并触发<f:ajax>更改或操作。您可以在this answer中找到类似的示例。

Answer 2

您可以尝试在ItsNat和JSF之间进行某种混合，例如使用iframe来包含包含SVG的ItsNat生成的标记。 ItsNat提供了许多选项，可以将SVG集成到Web应用程序中，纯SVG或SVG内联在线，包括SVG事件和Batik（顺便说一句，Batik applet中的SVG事件将在ItsNat 1.1中修复）。

想法：使用会话属性在JSF和ItsNat

之间共享桥对象