Refill a SVG Path with onMouseEntered event in JavaFX

Question

i'm working on a personal project which includes a .fxml document(created from a .svg file with NetBeans). Here is the Map as you can see.Moreover, all the regions are converted into a SVG Path in .fxml file. The thing is i can handle with mouse events with using JavaFX Scene Builder with a controller class however, i want to refill (or in other words repaint or highlight ) the region whenever mouse is entered on it. Here is main class

public class JavaFXApplication1 extends Application {

    @Override
    public void start(Stage primaryStage) throws IOException {
        Parent root = FXMLLoader.load(getClass().getResource("Risk3.fxml"));

        Scene scene = new Scene(root);

        primaryStage.setScene(scene);
        primaryStage.show();
    }

    /**
     * The main() method is ignored in correctly deployed JavaFX application.
     * main() serves only as fallback in case the application can not be
     * launched through deployment artifacts, e.g., in IDEs with limited FX
     * support. NetBeans ignores main().
     *
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }
}

and secondly, my controller class which includes the MouseEventListener;

import java.net.URL;
import java.util.ResourceBundle;
import javafx.fxml.Initializable;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.input.MouseEvent;


public class RiskControllerClass implements Initializable {

    @FXML
    private void onMouseEntered(MouseEvent event){

        System.out.println("Entered");
    }


    @Override // This method is called by the FXMLLoader when initialization is complete
    public void initialize(URL fxmlFileLocation, ResourceBundle resources) {

        // initialize your logic here: all @FXML variables will have been injected

    }

}

and finally a little piece of risk3.fxml code (i didn't put whole code cause it includes nearly 400 lines);

<Group id="Document" xmlns:fx="http://javafx.com/fxml" fx:controller="javafxapplication1.RiskControllerClass">
  <children>
    <fx:define />
    <SVGPath id="path3619" content=" M 0.00 0.00 L 1227.00 0.00 L 1227.00 116.00 C 1193.33 116.02 1159.67 115.98 1126.01 115.98 C 1126.01 116.49 1126.01 117.51 1126.01 118.02 C 1159.67 118.02 1193.33 117.98 1227.00 118.00 L 1227.00 628.00 L 0.00 628.00 L 0.00 99.32 C 6.64 98.86 13.31 98.87 19.94 98.17 C 13.30 97.62 6.65 97.18 0.00 96.77 L 0.00 0.00 Z" fill="#fefefe" opacity="1" />
    <SVGPath id="Greenland" fx:id="NA_3" content=" M 490.36 12.46 C 498.61 10.77 507.24 11.00 515.18 14.01 C 521.63 16.48 528.57 16.75 535.40 16.59 C 528.77 19.68 518.49 18.59 515.31 26.31 C 513.31 35.41 505.40 42.75 496.05 43.54 C 494.29 43.74 492.54 43.89 490.79 44.07 C 492.13 45.12 493.49 46.14 494.88 47.13 C 497.56 48.99 500.21 50.91 502.59 53.15 C 496.88 54.51 492.53 49.95 487.23 48.96 C 487.58 50.14 487.97 51.32 488.35 52.50 C 487.09 53.33 485.84 54.19 484.61 55.05 C 487.66 55.42 490.74 55.44 493.82 55.39 C 494.59 56.15 495.36 56.91 496.14 57.67 C 488.33 59.20 480.53 60.86 472.60 61.64 C 466.66 61.37 461.70 64.93 456.76 67.65 C 450.04 72.64 440.50 70.51 434.09 76.10 C 427.61 80.45 425.88 89.18 418.99 93.04 C 416.46 95.26 413.44 92.97 410.93 92.14 C 407.42 90.63 403.72 88.42 402.32 84.66 C 401.17 81.34 401.99 77.81 401.87 74.40 C 401.93 71.95 401.45 69.18 403.02 67.07 C 406.32 62.99 412.51 61.72 414.69 56.70 C 415.51 53.13 412.52 50.23 410.80 47.42 C 407.58 42.35 406.54 34.86 400.01 33.00 C 392.79 31.70 385.33 32.99 378.16 31.22 C 378.29 29.53 378.41 27.84 378.51 26.15 C 384.59 25.44 390.80 25.25 396.67 23.34 C 404.51 21.11 411.56 16.40 419.84 15.70 C 432.46 14.02 445.07 18.87 457.65 15.30 C 458.82 15.12 461.15 14.76 462.32 14.58 C 469.97 13.18 477.81 11.76 485.61 12.75 C 486.79 12.68 489.17 12.53 490.36 12.46 Z" fill="#fefe00" onMouseEntered="#onMouseEntered" opacity="1" />
    <SVGPath id="path3623" content=" M 485.61 12.75 C 485.60 10.49 489.75 10.48 490.36 12.46 C 489.17 12.53 486.79 12.68 485.61 12.75 Z" fill="WHITE" opacity="1" />
    <SVGPath id="path3625" content=" M 457.65 15.30 C 457.43 12.99 461.58 12.55 462.32 14.58 C 461.15 14.76 458.82 15.12 457.65 15.30 Z" fill="WHITE" opacity="1" />
    <SVGPath id="path3627" content=" M 365.37 29.33 C 369.45 28.35 373.61 27.58 377.82 27.46 C 363.52 32.99 348.15 34.67 333.34 38.37 C 324.32 40.14 315.46 43.02 306.24 43.63 C 309.25 41.84 312.58 40.65 316.01 39.98 C 318.77 39.39 321.51 38.84 324.29 38.28 C 338.00 35.39 351.71 32.46 365.37 29.33 Z" opacity="1" />
    <SVGPath id="Siberia" content=" M 836.39 34.09 C 842.29 34.41 846.57 28.51 852.59 29.79 C 858.25 31.43 864.07 32.69 870.01 32.56 C 874.75 32.93 881.62 32.13 884.05 37.38 C 880.74 39.42 877.36 41.29 873.97 43.17 C 874.28 43.65 874.91 44.61 875.22 45.09 C 878.03 44.44 880.83 43.74 883.63 43.00 C 887.15 45.97 890.81 48.78 894.42 51.65 C 892.13 53.63 889.75 55.48 887.42 57.40 C 892.45 63.72 897.32 70.25 903.17 75.85 C 910.35 81.68 909.87 92.10 915.23 99.21 C 909.46 100.74 903.98 103.17 898.29 104.96 C 898.85 110.08 900.49 115.47 898.84 120.52 C 894.83 123.31 891.12 128.24 885.78 127.94 C 883.18 128.09 879.68 127.44 878.27 130.29 C 878.33 133.94 880.28 137.20 881.41 140.60 C 878.38 141.55 875.41 142.64 872.51 143.92 C 868.65 140.54 864.66 137.34 860.51 134.33 C 863.89 131.72 867.43 129.25 870.66 126.42 C 865.67 121.43 860.73 116.39 855.89 111.26 C 860.27 110.18 864.63 109.16 869.04 108.13 C 866.64 105.09 864.24 102.02 861.50 99.29 C 857.61 95.69 851.80 95.84 847.31 93.50 C 843.42 90.36 841.49 85.57 839.11 81.32 C 835.89 76.46 830.28 74.27 825.55 71.23 C 818.16 67.65 813.71 58.96 804.81 58.76 C 803.60 55.05 801.40 51.81 799.08 48.72 C 798.85 48.38 798.39 47.70 798.16 47.36 C 802.44 41.78 809.74 42.57 815.92 41.57 C 815.27 40.07 814.63 38.58 814.00 37.09 C 821.39 35.60 828.88 34.79 836.39 34.09 Z" opacity="1">
      <fill>
        <Color blue="0.000" green="0.498" red="0.000" fx:id="x8" />
      </fill>
    </SVGPath>
      </children>
</Group>

So consider that i want to paint or highlight the region's (with id: Greenland) area whenever mouse is entered in that region. I will be appreciated if you can help and thanks anyway

Answer 1

Well, let me suggest some answer.

Looks like, you have to apply some css to your scene. Let me describe, how it should look like :

Look at the css reference, at the part about "". This type, is a type of -fx-effect property, which is applyable to nodes. SVGPath is a shape, so, a node. Look, at how inner shadow is applied :

innershadow( <blur-type> , <color> , <number> , <number> , <number> , <number> )

you need to apply this (other effects are not supported) to your SVGPaths, when they are hovered. "hover" is a name of such pseudo class.

Now, we need to write a selector for your SVGPaths. Unfortunately, SVGPath has no predefined style-class. So, you need obviously set that style class in your fxml. Suppose, you set style-class "svg-path".

Then, you can apply such css to your scene with map :

.svg-path:hover{-fx-effect:innershadow(...)}