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

概述我想要做的是创建具有交互式SVG内容的网页.我使用Batik作为Java桌面应用程序来渲染我的SVG并收集像mouseclick这样的UI事件.现在我想以相同的方式在我的JSF(Primefaces)Web应用程序中使用这些SVG图形文件. 试着开始,我发现这不起作用： < h：graphicImage id =“gloob”value =“images / sprinkverks.svg”    我想要做的是创建具有交互式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找到一个类似的例子.

总结

以上是内存溢出为你收集整理的html – JSF 2.0页面中的SVG图形对象入门全部内容，希望文章能够帮你解决html – JSF 2.0页面中的SVG图形对象入门所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。