我要做的是创建具有交互式SVG内容的网页。我曾使用Batik作为Java桌面应用程序来渲染SVG并收集UI事件(例如mouseclick)。现在,我想以相同的方式在我的JSF(Primefaces)Web应用程序中使用那些SVG图形文件。
尝试开始时,我发现这行不通:
alt =“图片在这里”/>
我不介意做一些阅读来使学习曲线更上一层楼。某些Google搜索没有发现任何有用的信息,这有点令人惊讶。
我发现的发现建议我必须使用f:verbatim标记来执行此操作,就像我在手工编写HTML一样。然后,我将不得不添加一些脚本来捕获SVG事件,并将其反馈回AJAX代码。如果我必须做所有我想做的事情,但是我希望会有一种更简单,更自动化的方法。
因此,问题是:
非常感谢您的任何指点。
最佳答案
<h:graphicImage>
仅呈现HTML <img>
元素。这不适用于当前浏览器中的SVG对象。您need <object type="image/svg+xml">
。从JSF 1.2开始,<f:verbatim>
变得很丑陋。在Facelets上,您可以使用纯HTML内联EL,如下所示:
<object type="image/svg+xml" data="#{bean.svgUrl}">
但是no need不提供呈现
<object>
的UI组件,因此您必须使用普通的HTML格式进行操作。我已经检查了standard JSF implementation,PrimeFaces和OpenFaces,但是没有人提供针对嵌入SVG对象的组件。 PrimeFaces对于电影对象具有RichFaces,而RichFaces对于电影对象具有 <p:media>
,仅此而已。最好的选择是编写一些JavaScript,这些JavaScript委托(delegate)给隐藏的JSF ajax表单。将必要的数据写入隐藏字段并触发
<a4j:mediaOutput>
更改或操作。您可以在 <f:ajax>
中找到类似的示例。