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

Thu, 23 Jan 2003 06:51:12 -0800

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>

 

 

Reply via email to