我想做的是创建具有交互式 SVG 内容的网页。我将其作为 Java 桌面应用程序使用 Batik 来渲染我的 SVG 并收集 UI 事件（例如鼠标单击）。现在我想以同样的方式在我的 JSF (Primefaces) Web 应用程序中使用这些 SVG 图形文件。
尝试开始，我发现这不起作用：
我不介意通过阅读来提高学习曲线。令人有点惊讶的是，一些谷歌搜索没有找到任何有用的东西。
我发现的结果表明我必须使用 f:verbatim 标签来执行此操作，就像我手动编码 HTML 一样。然后我必须添加一些脚本来捕获 SVG 事件并将它们反馈到 AJAX 代码中。如果我必须做所有这些，我会的，但我希望有一种更简单、自动化的方法。
所以问题是：
- 如何首先渲染图像？
- 如何将 DOM 事件从页面的 SVG 部分返回到支持 bean？
非常感谢您的指点。
What I want to do is create web pages with interactive SVG content. I had this working as a Java desktop application using Batik to render my SVG and collect UI events like mouseclick. Now I want to use those SVG graphics files in my JSF (Primefaces) web application in the same way.
Trying to get started, I found this didn't work:
<h:graphicImage id="gloob" value="images/sprinkverks.svg"
alt="Graphic Goes Here"/>
I don't mind doing some reading to get up the learning curve. It was just a bit surprising that some google searches didn't turn up anything useful.
What I did find suggested that I would have to do this with the f:verbatim tag as if I were hand-coding the HTML. I would then have to add some script to capture the SVG events and feed them back into the AJAX code. If I have to do all that I will, but I was hoping there would be an easier and automated way.
So the questions are:
- How to get the image to render in the first place?
- How to get the DOM events from the SVG portion of the page back to the backing beans?
Much thanks for any pointers.
发布评论
评论（2）
![]()
标准 JSF 实现 但是不提供呈现
最好的选择是编写一些 JavaScript 来委托隐藏的 JSF ajax 表单。将必要的数据写入隐藏字段并触发
The
<h:graphicImage>just renders a HTML<img>element. This doesn't work for SVG objects in current browsers. You need<object type="image/svg+xml">. Since JSF 1.2, there's no need for the<f:verbatim>ugliness. On Facelets you can just inline EL in plain HTML like so:The standard JSF implementation however doesn't offer an UI component which renders an
<object>, so you have got to do it the plain vanilla HTML way. I've checked at PrimeFaces, OpenFaces and RichFaces, but no one offer a component yet which is targeted on embedding SVG objects. PrimeFaces has a<p:media>and RichFaces an<a4j:mediaOutput>for movie objects, but that's it.Your best bet is to write some JavaScript which delegates to a hidden JSF ajax form. Write the necessary data to the hidden fields and trigger the
<f:ajax>change or action. You can find a similar example in this answer.您可以尝试在 ItsNat 和 JSF 之间进行某种混合，例如使用 iframe 来包含 ItsNat 生成的包含 SVG 的标记。 itsNat 提供了许多将 SVG 集成到 Web 应用程序中的选项，纯 SVG 或 HTML 中内联的 SVG，包括 SVG 事件和 Batik（顺便说一下，Batik 小程序中的 SVG 事件将在 ItsNat 1.1 中修复）。
想法：使用会话属性在JSF和ItsNat之间共享桥接对象
You could try some kind of mix between ItsNat and JSF, for instance using an iframe to contain ItsNat generated markup containing SVG. ItsNat provides many options to integrate SVG in web applications, pure SVG or SVG inline in HTML, including SVG events and Batik (by the way SVG events in Batik applet are going to be fixed in ItsNat 1.1).
Idea: use a session attribute to share a bridge object between JSF and ItsNat