RE: Question: svg element generated from ecmascript can't do clipping

>>>>> "WH" == William Huang <shuang@xxxxxxxxxxxx> 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>