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

Question

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

试着开始,我发现这不起作用:

<h:graphicImage id ="gloob"value ="images/sprinkverks.svg"alt ="Graphic Goes Here"/>

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

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

所以问题是:

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

非常感谢任何指针.

Answer 1

如何让图像首先渲染？

在<h:graphicImage>刚刚呈现一个HTML <img>元素.这不适用于当前浏览器中的SVG对象.你需要 <object type="image/svg+xml">.由于JSF 1.2,有没有必要为<f:verbatim>丑.在Facelets上,您可以像普通HTML一样内联EL,如下所示:

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

然而,标准的JSF实现不提供呈现的UI组件<object>,因此您必须使用普通的HTML方式.我已经检查过PrimeFaces,OpenFaces和RichFaces,但没有人提供一个目标是嵌入SVG对象的组件.PrimeFaces有一个<p:media>和RichFaces一个<a4j:mediaOutput>用于电影对象,但就是这样.

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

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