Loading ...
Sorry, an error occurred while loading the content.

SVG loading or display problems

Expand Messages
  • frcpsvg
    Hi to all. I m new to this group and not a teacher in English but I ll do the best to ask your help for the followin problem, on which I m breaking my head
    Message 1 of 1 , Apr 10, 2009
    • 0 Attachment
      Hi to all.
      I'm new to this group and not a teacher in English but I 'll do the best to ask your help for the followin problem, on which I'm breaking my head in the last week.

      I'm developing a RCP application with Eclipse 3.3
      I made a bundle with apache batik 1.7 jars with a minor change in the "batik-ext.jar" because of class loader exception.

      Then I load a svg file in a Editor.
      The svg is displayed correctly.

      I can generate circles in the svg and i can move it with the mouse with drag and drop (in jscript, just for test).

      But when I move a circle on the lower left side of the svg , the svg gets corrupted , showing blank lines when the mouse moves over this side.

      This only occurs in the lower portion of the svg.

      If a resize the window , the svg returns OK (but the next drag and drop gets it corrupted) and so on.

      It seems like a repaint problem, but i'm not sure.

      So some code:

      -------------svg file
      <?xml version="1.0" encoding="utf-8"?>
      <!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.0//EN' 'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'>

      <svg contentScriptType="text/ecmascript" zoomAndPan="magnify" xmlns:xlink="http://www.w3.org/1999/xlink"
      onmousedown="Grab(evt)" onload="Init(evt)" contentStyleType="text/css" version="1.0" width="500"
      viewport="0 0 500 500" preserveAspectRatio="xMidYMid meet" onmouseup="Drop(evt)" height="500"
      xmlns="http://www.w3.org/2000/svg" onmousemove="Drag(evt)">

      <script xlink:actuate="onLoad" xlink:type="simple" xlink:show="other" xmlns:xlink="http://www.w3.org/1999/xlink"><![CDATA[
      var SVGDocument = null;
      var SVGRoot = null;

      var TrueCoords = null;
      var GrabPoint = null;
      var BackDrop = null;
      var DragTarget = null;

      function Init(evt)
      SVGDocument = evt.target.ownerDocument;
      SVGRoot = SVGDocument.documentElement;

      // these svg points hold x and y values...
      // very handy, but they do not display on the screen (just so you know)
      TrueCoords = SVGRoot.createSVGPoint();
      GrabPoint = SVGRoot.createSVGPoint();

      // this will serve as the canvas over which items are dragged.
      // having the drag events occur on the mousemove over a backdrop
      // (instead of the dragged element) prevents the dragged element
      // from being inadvertantly dropped when the mouse is moved rapidly
      BackDrop = SVGDocument.getElementById('BackDrop');

      function Grab(evt)
      // find out which element we moused down on
      var targetElement = evt.target;

      // you cannot drag the background itself, so ignore any attempts to mouse down on it
      if ( BackDrop != targetElement )
      //set the item moused down on as the element to be dragged
      DragTarget = targetElement;
      // move this element to the "top" of the display, so it is (almost)
      // always over other elements (exception: in this case, elements that are
      // "in the folder" (children of the folder group) with only maintain
      // hierarchy within that group
      DragTarget.parentNode.appendChild( DragTarget );

      // turn off all pointer events to the dragged element, this does 2 things:
      // 1) allows us to drag text elements without selecting the text
      // 2) allows us to find out where the dragged element is dropped (see Drop)
      DragTarget.setAttributeNS(null, 'pointer-events', 'none');

      // we need to find the current position and translation of the grabbed element,
      // so that we only apply the differential between the current location
      // and the new location
      var transMatrix = DragTarget.getCTM();
      GrabPoint.x = TrueCoords.x - Number(transMatrix.e);
      GrabPoint.y = TrueCoords.y - Number(transMatrix.f);

      function Drag(evt)
      // account for zooming and panning

      // if we don't currently have an element in tow, don't do anything
      if (DragTarget)
      // account for the offset between the element's origin and the
      // exact place we grabbed it... this way, the drag will look more natural
      var newX = TrueCoords.x - GrabPoint.x;
      var newY = TrueCoords.y - GrabPoint.y;

      // apply a new tranform translation to the dragged element, to display
      // it in its new location
      DragTarget.setAttributeNS(null, 'transform', 'translate(' + newX + ',' + newY + ')');

      function Drop(evt)
      // if we aren't currently dragging an element, don't do anything
      if ( DragTarget )
      // since the element currently being dragged has its pointer-events turned off,
      // we are afforded the opportunity to find out the element it's being dropped on
      var targetElement = evt.target;

      // turn the pointer-events back on, so we can grab this item later
      DragTarget.setAttributeNS(null, 'pointer-events', 'all');
      // set the global variable to null, so nothing will be dragged until we
      // grab the next element
      DragTarget = null;

      function GetTrueCoords(evt)
      // find the current zoom level and pan setting, and adjust the reported
      // mouse position accordingly
      var newScale = SVGRoot.currentScale;
      var translation = SVGRoot.currentTranslate;
      TrueCoords.x = (evt.clientX - translation.x)/newScale;
      TrueCoords.y = (evt.clientY - translation.y)/newScale;


      <rect x="0" y="0" width="500" id="BackDrop" height="500" pointer-events="all"/>

      <rect x="90" y="100" width="50" height="50" fill="moccasin" stroke-width="3" />
      <rect x="90" y="200" width="50" height="50" fill="moccasin" stroke-width="3" />
      <rect x="90" y="300" width="50" height="50" fill="moccasin" stroke-width="3" />
      <rect x="90" y="400" width="50" height="50" fill="moccasin" stroke-width="3" />

      <circle device="yes" transform="translate(-184,-49)" fill="yellow" uniqueID="5" r="10" cx="222" cy="75" id="_DEV5" stroke="lime" stroke-width="1" pointer-events="all">
      <title>L.2 D.2-dispo 2 parent id 2</title>
      <circle device="yes" transform="translate(-60,-13)" fill="yellow" uniqueID="1" r="10" cx="147" cy="42" id="_DEV1" stroke="lime" stroke-width="1" pointer-events="all">
      <title>null-Dispo Ax parent id 1</title>
      <circle device="yes" transform="translate(-129,11)" fill="yellow" uniqueID="4" r="10" cx="259" cy="19" id="_DEV4" stroke="lime" stroke-width="1" pointer-events="all">
      <title>L.2 D.1-dispo 1 parent id 2</title>

      <rect x="10" y="200" width="100" height="150" fill="yellow" stroke-width="3" />


      Loading of svg from Java code

      private class SVGViewer {

      private JSVGCanvas svgCanvas;
      private JSVGScrollPane scroll;
      private Window window;

      public SVGViewer ( final Frame parent ) { //java.awt.Frame

      svgCanvas = new JSVGCanvas ();
      scroll = new JSVGScrollPane ( svgCanvas );
      parent.add ( "Center" , scroll );

      public void showGUI ( Frame parent ) {

      public class SVGLoadAndShow {

      public SVGLoadAndShow ( Composite svgComp ) {

      final java.awt.Frame svgFrame = SWT_AWT.new_Frame(svgComp);
      javax.swing.SwingUtilities.invokeLater( new Runnable() {

      public void run() {

      viewer = new SVGViewer(svgFrame);
      log.debug ("Should draw " + getPartName() );
      viewer.getSVGCanvas().setURI ( "file:" + getPartName() );

      } // run()
      }); // new Runnable( {...
      } // end of Constructor


      Some help or ideas ? Someone else with the same problem ?
      I don't know how to handle it !
    Your message has been successfully submitted and would be delivered to recipients shortly.