You are viewing a plain text version of this content. The canonical link for it is here.
Posted to batik-users@xmlgraphics.apache.org by William Huang <sh...@xperient.net> on 2003/01/23 15:49:58 UTC
Question: svg element generated from ecmascript can't do clipping
The following example shows that I can use the inner svg element to clip
the rectangle in (0,0,300,200)
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%"
viewBox="0 0 800 500">
<svg id="scrollContainer" x="250" y="50" width="500" height="420"
zoomAndPan="disable">
<svg x="0" y="0" width="300" height="200">
<g id="scrollImg">
<rect x="0" y="0" width="741" height="660" fill="blue"/>
</g>
</svg>
</svg>
</svg>
However, when I use ecmascript to manipulate the DOM tree for this
functionality, the inner svg element can't do clipping. The rectangle is
restricted to the area of the outer svg element (width=500, height=420)
instead of the
inner svg element. Is there a workaround for this problem? Thank you
very much.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%"
viewBox="0 0 800 500">
<script type="text/ecmascript">
function init() {
var svgNs = "http://www.w3.org/2000/svg";
var xlinkNs = "http://www.w3.org/1999/xlink";
var conElement = document.getElementById("scrollContainer");
var newconElement = document.createElementNS(svgNs, "svg");
newconElement.setAttribute("xmlns", "http://www.w3.org/2000/svg");
newconElement.setAttributeNS(xlinkNs, "xlink", xlinkNs);
newconElement.setAttribute("x", 0);
newconElement.setAttribute("y", 0);
newconElement.setAttribute("width", 300);
newconElement.setAttribute("height", 200);
var paneElement = document.createElementNS(svgNs, "g");
paneElement.setAttribute("id", "scrollPane");
newconElement.appendChild(paneElement);
conElement.appendChild(newconElement);
var imgElement = document.getElementById("scrollImg");
var newImg = imgElement.cloneNode(true);
conElement.removeChild(imgElement);
paneElement.appendChild(newImg);
}
</script>
<svg id="scrollContainer" x="250" y="50" width="500" height="420"
zoomAndPan="disable" onload="init()">
<g id="scrollImg">
<rect x="0" y="0" width="741" height="660" fill="blue"/>
</g>
</svg>
</svg>
RE: Question: svg element generated from ecmascript can't do clipping
Posted by Thomas E Deweese <th...@kodak.com>.
>>>>> "WH" == William Huang <sh...@xperient.net> writes:
Hi William,
I suspect there may be some bug in the handling of clipping on SVG
elements however, the following replacement for your init function
seems to work fine for me, it also avoids copying the scrollImg Group
(which could possibly have caused your problem as well).
---
function init() {
var svgNs = "http://www.w3.org/2000/svg";
var xlinkNs = "http://www.w3.org/1999/xlink";
var conElement = document.getElementById("scrollContainer");
var newconElement = document.createElementNS(svgNs, "svg");
newconElement.setAttribute("xmlns", "http://www.w3.org/2000/svg");
newconElement.setAttributeNS(xlinkNs, "xlink", xlinkNs);
newconElement.setAttribute("x", 0);
newconElement.setAttribute("y", 0);
newconElement.setAttribute("width", 300);
newconElement.setAttribute("height", 200);
var paneElement = document.createElementNS(svgNs, "g");
paneElement.setAttribute("id", "scrollPane");
paneElement.appendChild(document.getElementById("scrollImg"));
newconElement.appendChild(paneElement);
conElement.appendChild(newconElement);
}
---
I must say that I am extreamly surprised to hear that you find this
faster than scrolling the JSVGCanvas, as this approach in fact does no
caching of the rendered content at all. If I had the time I would
write a scroller that leveraged the caching stuff in Batik more
directly but unfortunately I don't have that time...
---
WH> The following example shows that I can use the inner svg element
WH> to clip the rectangle in (0,0,300,200)
WH> <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC
WH> "-//W3C//DTD SVG 1.0//EN"
WH> "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg
WH> xmlns="http://www.w3.org/2000/svg"
WH> xmlns:xlink="http://www.w3.org/1999/xlink" width="100%"
WH> height="100%" viewBox="0 0 800 500">
WH> <svg id="scrollContainer" x="250" y="50" width="500"
WH> height="420" zoomAndPan="disable"> <svg x="0" y="0" width="300"
WH> height="200"> <g id="scrollImg"> <rect x="0" y="0" width="741"
WH> height="660" fill="blue"/> </g> </svg> </svg> </svg>
WH> However, when I use ecmascript to manipulate the DOM tree for this
WH> functionality, the inner svg element can't do clipping. The
WH> rectangle is restricted to the area of the outer svg element
WH> (width=500, height=420) instead of the inner svg element. Is there
WH> a workaround for this problem? Thank you very much.
WH> <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC
WH> "-//W3C//DTD SVG 1.0//EN"
WH> "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg
WH> xmlns="http://www.w3.org/2000/svg"
WH> xmlns:xlink="http://www.w3.org/1999/xlink" width="100%"
WH> height="100%" viewBox="0 0 800 500"> <script
WH> type="text/ecmascript"> function init() { var svgNs =
WH> "http://www.w3.org/2000/svg"; var xlinkNs =
WH> "http://www.w3.org/1999/xlink";
WH> var conElement = document.getElementById("scrollContainer");
WH> var newconElement = document.createElementNS(svgNs, "svg");
WH> newconElement.setAttribute("xmlns", "http://www.w3.org/2000/svg");
WH> newconElement.setAttributeNS(xlinkNs, "xlink", xlinkNs);
WH> newconElement.setAttribute("x", 0);
WH> newconElement.setAttribute("y", 0);
WH> newconElement.setAttribute("width", 300);
WH> newconElement.setAttribute("height", 200);
WH> var paneElement = document.createElementNS(svgNs, "g");
WH> paneElement.setAttribute("id", "scrollPane");
WH> newconElement.appendChild(paneElement);
WH> conElement.appendChild(newconElement);
WH> var imgElement = document.getElementById("scrollImg"); var
WH> newImg = imgElement.cloneNode(true);
WH> conElement.removeChild(imgElement);
WH> paneElement.appendChild(newImg); } </script> <svg
WH> id="scrollContainer" x="250" y="50" width="500" height="420"
WH> zoomAndPan="disable" onload="init()"> <g id="scrollImg"> <rect
WH> x="0" y="0" width="741" height="660" fill="blue"/> </g> </svg>
WH> </svg>
---------------------------------------------------------------------
To unsubscribe, e-mail: batik-users-unsubscribe@xml.apache.org
For additional commands, e-mail: batik-users-help@xml.apache.org