Uploaded image for project: 'JDK'
  1. JDK
  2. JDK-8161284

JavaScript onclick, onmouseover and onmouseout don't work with SVG Line Elements

XMLWordPrintable

    • web
    • x86_64
    • windows_7

      FULL PRODUCT VERSION :
      java version "1.8.0_92"
      Java(TM) SE Runtime Environment (build 1.8.0_92-b14)
      Java HotSpot(TM) Client VM (build 25.92-b14, mixed mode, sharing)

      ADDITIONAL OS VERSION INFORMATION :
      Microsoft Windows [Version 6.1.7601]

      A DESCRIPTION OF THE PROBLEM :
      For a SVG file with any type of closed shape (polygon, circle, ...), onmouseover, onmouseout and onclick events work. For lines and polyline none of these events work.

      I tested this in chrome, firefox and IE 11 and it works.

      STEPS TO FOLLOW TO REPRODUCE THE PROBLEM :
      1. Create an SVG file with a line and a polygon as follows:

      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" version="1.1" viewBox="0 0 500 500" xml:space="preserve" zoomAndPan="magnify">
        <polygon points="200,10 250,190 160,210" fill="green" onmouseover="this.style.fill='red'" onmouseout="this.style.fill='green'" onclick="if(this.style.fill=='red'){this.style.fill='green'}else{this.style.fill='red'}"/>
        <line x1="100" y1="10" x2="250" y2="10" stroke="black" stroke-width="10" onmouseover="this.style.stroke='green'" onmouseout="this.style.stroke='black'" onclick="if(this.style.stroke=='black'){this.style.stroke='green'}else{this.style.stroke='black'}"/>
      </svg>

      2. Load the SVG file into the webEngine (webEngine.load("file:/mySVGFile.svg");

      3. Move the mouse over the polygon. The polygon turns red.

      4. Move the mouse out of the polygon. The polygon turn back to green.

      5. Click on the polygon. the polygon turns red.

      6. Move the mouse over the line.

      7. move the mouse out of the line.

      8. click on the line.


      EXPECTED VERSUS ACTUAL BEHAVIOR :
      EXPECTED -
      1. When moving the mouse over the line, the line should turn green.

      2. When moving the mouse out of the line the line should turn black.

      3. When clicking on the line, the line should turn green and if clicked again turn black.
      ACTUAL -
      Nothing occurs.

      1. When moving the mouse over the line, the line stays black.

      2. When moving the mouse out of the line the line stays black.

      3. When clicking on the line, it stays black.

      REPRODUCIBILITY :
      This bug can be reproduced always.

      ---------- BEGIN SOURCE ----------
      Code:
      package webviewsample;

      import java.io.File;

      import javafx.application.Application;
      import javafx.event.ActionEvent;
      import javafx.event.EventHandler;
      import javafx.scene.Scene;
      import javafx.scene.control.Button;
      import javafx.scene.layout.Region;
      import javafx.scene.paint.Color;
      import javafx.scene.web.WebEngine;
      import javafx.scene.web.WebView;
      import javafx.stage.FileChooser;
      import javafx.stage.Stage;

      public class SimpleSVGBrowser extends Application {
          private Scene scene;

          public class Browser extends Region {
              
              File currentFile = null;
              public Browser(Stage stage) {
                  WebView browser = new WebView();
                  WebEngine webEngine = browser.getEngine();
                  FileChooser fileChooser = new FileChooser();
                  Button fileChooserButton = new Button("Select File");

                  fileChooserButton.setOnAction(new EventHandler<ActionEvent>() {
                      @Override
                      public void handle(ActionEvent event) {
                          currentFile = fileChooser.showOpenDialog(null);
                           if(currentFile != null){
                                   webEngine.load("file:/"+currentFile);
                                  fileChooser.setInitialDirectory(currentFile.getParentFile());
                              }
                      }
                  });
                  getChildren().add(browser);
                  getChildren().add(fileChooserButton);
              }
          }

          
          
          
          @Override
          public void start(Stage stage) throws Exception {
              Browser svgBrowser = new Browser(stage);
              scene = new Scene(svgBrowser, 750, 500, Color.web("#666970"));
              stage.setScene(scene);
              stage.show();
              
          }
          
          public static void main(String[] args) {
              launch(args);
          }
      }
      ---------- END SOURCE ----------

      CUSTOMER SUBMITTED WORKAROUND :
      In some cases a polygon with a small width can be used instead of a line.

        1. SimpleSVGBrowser.java
          2 kB
          Priyanka Mangal
        2. SVGSample.svg
          0.7 kB
          Priyanka Mangal

            Unassigned Unassigned
            webbuggrp Webbug Group
            Votes:
            0 Vote for this issue
            Watchers:
            4 Start watching this issue

              Created:
              Updated: