Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
Hi there,
Ok, we got the generating SVG down (http://www.zkoss.org/forum/listComment/13667). Now the question is how to get it to work in Internet Exolorer.
The object tag works well in Firefox, Opera, Safari and Chrome (tested myself). This is the code:
<window id="winLandingDashboard" apply="com.gpsbadger.schools.admin.LandingDashboardPanel">
<html>
<![CDATA[
<object data="chart.svg" width="640" height="480" type="image/svg+xml"/>
]]>
</html>
</window>
I wanted to use the SVGWeb JavaScript library, but it needs to be the script item in the page (not going to happen in an AJAX framework). Adobe doesn't support their SVG plugin anymore. Has anyone got some code that they can paste here that works?
Thanks,
Mark
Hi Mark
You have to install a plugin
http://www.planetsvg.com/content/svg-solutions-internet-explorer
Yeah, unfortunately I can't fine one that works reliably. I think I'm going to package Batik to do my SVG for me. Any idea how to manipulate the data attribute of the Object tag in Java / ZUL. I see there is no support for <object/> in org.zkoss.zul
another simple way is use iframe tag
<iframe src="rect.svg" width="300px" height="100px"/>
Ok, good idea. Used an IFrame for now. I would like to know how to do it for future reference though, please. That is, access an attribute of an XHTML element:
Change the data attribute of the object tag from Java
<window id="winLandingDashboard" apply="com.gpsbadger.schools.admin.LandingDashboardPanel">
<html>
<![CDATA[
<object data="chart.svg" width="640" height="480" type="image/svg+xml"/>
]]>
</html>
</window>I have create a sample
<window>
<button label="add svg" >
<attribute name="onClick"><![CDATA[
Map args = new HashMap();
args.put("data", "circle.svg");
Executions.createComponents("page1.zul", div ,args);
]]></attribute>
</button>
<div id="div"/>
</window>
page1.zul
<html>
<![CDATA[
<object data="${arg.data}" width="640" height="480" type="image/svg+xml"/>
]]>
</html>
or just use zk iframe
<window>
<button label="add svg" >
<attribute name="onClick"><![CDATA[
div.appendChild(new Iframe("circle.svg"));
]]></attribute>
</button>
<div id="div"/>
</window>
Hey Jimmy,
Any idea how to send a SVG onclick event back to ZK?
<z:zk z:forEach="${chart.barxValues}">
<z:zk z:onClick="alert('hello')">
<text x="${each.middle}" y="${chart.chartBottom + 20}" text-anchor="middle" fill="black" stroke="none" stroke-width="0" font-size="10" font-family="Helvetica, Arial, Verdana">${edoList[forEachStatus.index].fullname}</text>
<z:zk z:forEach="${edoList[forEachStatus.index].activityList}">
<rect x="${forEachStatus.previous.each.left}" y="${area[forEachStatus.previous.index][forEachStatus.index].y}" width="${forEachStatus.previous.each.width}" height="${area[forEachStatus.previous.index][forEachStatus.index].height}" fill="${area[forEachStatus.previous.index][forEachStatus.index].colour}" stroke="none" style="opacity:${area[forEachStatus.previous.index][forEachStatus.index].backgroundOpacity};cursor:pointer;"/>
<text x="${forEachStatus.previous.each.middle}" y="${area[forEachStatus.previous.index][forEachStatus.index].y + 11}" text-anchor="middle" fill="black" stroke="none" stroke-width="0" font-size="10" font-family="Helvetica, Arial, Verdana" style="opacity:${area[forEachStatus.previous.index][forEachStatus.index].textOpacity}">${area[forEachStatus.previous.index][forEachStatus.index].activity.name}</text>
</z:zk>
</z:zk>
</z:zk>Using <z:zk z:onClick="alert('hello')"> doesn't seem to work. I can't find a SVG tag that is both common to HTML and SVG that I can use as a wrapper. Plain SVG onClick works, but then I lose ZK and am using straight JavaScript.
Help appreciated...
I tried your example to set the attribute of the object tag:
I have this in the zul:
<window id="winVisual" xmlns:xhtml="http://www.w3.org/1999/xhtml">
<xhtml:object id="objVisual" data="${winLandingDashboard$visualUrl}" width="1020" height="600" type="image/svg+xml"/>
</window>And this in my Java:
public String getVisualUrl() {
return currentSvgUrl;
}
public void update() {
Executions.createComponents("LandingDashboardPanel.zul", winLandingDashboard.getFellow("winVisual"), null);
}But I'm getting:
org.zkoss.zk.ui.UiException: Replicated UUID is not allowed for class org.zkoss.zhtml.Object: objVisual
Can I not use some kind of an annotated data bind - or even easier, just create my own custom tag for Object, solving the problem?
You can try canvas4z
http://docs.zkoss.org/wiki/How_To_Use_Canvas4Z
We not suggest use SVG
maybe You can try to use canvas4z to instead it
Asked: 2010-09-15 04:51:32 +0800
Seen: 886 times
Last updated: Oct 03 '10