html – JSF 2.0页面中的SVG图形对象入门

发布时间：2020-12-14 21:19:28 所属栏目：资源来源：网络整理

导读：我想要做的是创建具有交互式SVG内容的网页.我使用Batik作为Java桌面应用程序来渲染我的SVG并收集像mouseclick这样的UI事件.现在我想以相同的方式在我的JSF(Primefaces)Web应用程序中使用这些SVG图形文件. 试着开始,我发现这不起作用： h：graphicImage id =

我想要做的是创建具有交互式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代码.如果我必须尽我所能,但我希望有一种更容易和自动化的方式.

所以问题是：

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

非常感谢任何指针.

解决方法

How to get the image to render in the first place?

<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>用于电影对象,但就是这样.

How to get the DOM events from the SVG portion of the page back to the backing beans?

最好的办法是编写一些委托给隐藏的JSF ajax表单的JavaScript.将必要的数据写入隐藏字段并触发< f：ajax>变化或行动.你可以在this answer找到一个类似的例子.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!