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

尝试开始时,我发现这行不通:

alt =“图片在这里”/>

我不介意做一些阅读来使学习曲线更上一层楼。某些Google搜索没有发现任何有用的信息,这有点令人惊讶。

我发现的发现建议我必须使用f:verbatim标记来执行此操作,就像我在手工编写HTML一样。然后,我将不得不添加一些脚本来捕获SVG事件,并将其反馈回AJAX代码。如果我必须做所有我想做的事情,但是我希望会有一种更简单,更自动化的方法。

因此,问题是:

  • 如何首先获得要渲染的图像?
  • 如何使DOM事件从页面的SVG部分返回到支持bean?

  • 非常感谢您的任何指点。

    最佳答案



    <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 implementationPrimeFacesOpenFaces,但是没有人提供针对嵌入SVG对象的组件。 PrimeFaces对于电影对象具有RichFaces,而RichFaces对于电影对象具有 <p:media> ,仅此而已。



    最好的选择是编写一些JavaScript,这些JavaScript委托(delegate)给隐藏的JSF ajax表单。将必要的数据写入隐藏字段并触发<a4j:mediaOutput>更改或操作。您可以在 <f:ajax> 中找到类似的示例。

    10-06 04:32
    查看更多