How to create a Path in JavaFX from an SVG image?

Question

I tried creating a path from an SVG image to use this in my JavaFX application. I followed Jorn Hameister's Guide, but one thing I couldn't figure out was what to actually enter as the SVG Path.

package org.hameister.javafx.svg;

import javafx.animation.PathTransition;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.Pane;
import javafx.scene.shape.Path;
import javafx.stage.Stage;
import javafx.util.Duration;

import org.apache.batik.parser.PathParser;

/**
 * The alien icon:
 * http://commons.wikimedia.org/wiki/File:Smiley_green_alien_gun.svg
 *
 * @author hameister
 */
public class JavaFXAlienRallye extends Application {

    private final static double WIDTH = 650;
    private final static double HEIGHT = 500;

    @Override
    public void start(Stage primaryStage) {
        Pane root = new Pane();

        // Parse the SVG Path with Apache Batik and create a Path
        PathParser parser = new PathParser();
        JavaFXPathElementHandler handler = new JavaFXPathElementHandler("track");
        parser.setPathHandler(handler);
        parser.parse("M 150 50 L 550,50 A 50 50 0 0 1 600,100 L 600,350 A 50 50 0 0 1 550,400 L 400,400 A 50 50 0 0 1 350,350 L 350,300 A 50 50 0 0 0 300,250 L 250,250 A 50 50 0 0 0 200,300 L 200,450 A 50,50 0 0 1 150,500 A 50 50 0 0 1 100,450 L 100,100 A 50 50 0 0 1 150,50 z");


        Path path = handler.getPath();
        root.getChildren().add(path);

        // Moving image
        ImageView alien = new ImageView(new Image("green_alien.png"));
        alien.setScaleX(0.3);
        alien.setScaleY(0.3);
        root.getChildren().add(alien);

        // Path Transition
        PathTransition pathTransition = new PathTransition();
        pathTransition.setDuration(Duration.seconds(30));
        pathTransition.setPath(path);
        pathTransition.setNode(alien);
        pathTransition.setOrientation(PathTransition.OrientationType.ORTHOGONAL_TO_TANGENT);
        pathTransition.setCycleCount(Timeline.INDEFINITE);
        pathTransition.play();

        primaryStage.setTitle("JavaFX Alien Rallye");
        primaryStage.setScene(new Scene(root, WIDTH, HEIGHT));
        primaryStage.getScene().getStylesheets().add("alien");
        primaryStage.show();
    }


    public static void main(String[] args) {
        launch(args);
    }
}

The image I tried to parse into a JavaFX path object: Image

I used this as the path (to be honest, I have no idea what to enter for the path):

"m798.80662,662.98805c0,0 -16.03157,-6.2936 -30.82085,-7.85875c-8.21125,-0.869 -21.55367,-1.6813 -29.14527,-8.13374c-7.5916,-6.45244 -6.65146,-15.24383 -5.40193,-20.56951c1.38985,-5.92377 5.76714,-9.70222 10.15625,-12.89062c5.71085,-4.14855 14.07063,-5.77574 18.75,-12.10938c7.29771,-9.87762 6.97557,-11.80062 11.27928,-23.4375c3.44083,-9.30372 2.87127,-22.77436 2.89628,-32.90501c0.021,-8.49018 -1.60103,-19.56202 3.92939,-26.10507c1.7727,-2.09729 5.59896,-2.73437 7.42187,-3.51562c1.82291,-0.78125 9.2448,-1.5625 9.76563,-1.5625l67.40082,-9.92754"

But this is the error I keep getting:

First element of the path can not be relative.

Answer 1

Simply using SVGPath this works although starting with a lowercase m means the move first move is relative which doesn't make that much sense and requires the parser to deal with that. SVGPath this seems to be able to deal with this kind of scenario, your code seems to have an issue with that.

Since SVGPath is part of JavaFX since version 2 there seems to be no reason not to use it in this case. Example:

@Override
public void start(Stage primaryStage) {
    SVGPath path = new SVGPath();

    // path from part of https://commons.wikimedia.org/wiki/File:Monte_Carlo_Formula_1_track_map.svg
    path.setContent("m 207.65129,536.68637 c 8.87045,-24.50098 26.39974,-70.18108 36.17152,-89.75895 9.77178,-19.57788 6.98479,-15.77432 16.96935,-29.91965 9.98456,-14.14533 30.28218,-37.23551 39.74401,-49.1218 9.46184,-11.8863 11.74077,-14.36188 15.18311,-20.09529 3.44234,-5.73341 7.77799,-17.20603 11.16404,-21.88154 3.38605,-4.67551 6.01249,-7.00118 9.3778,-8.48468 3.36531,-1.4835 5.14045,-1.28812 8.48468,-0.44656 3.34423,0.84156 6.89747,4.23124 13.39686,7.145 6.4994,2.91375 8.09762,3.74402 16.07623,6.25186 7.97861,2.50784 82.29308,18.3393 110.74735,23.66778 28.45427,5.32848 37.36257,5.13382 59.8393,8.93124 22.47673,3.79742 44.58585,5.15957 69.66366,11.61061 25.07781,6.45104 59.82154,22.58817 80.38114,26.79371 20.5596,4.20554 21.35623,3.391 40.63714,4.01906 19.28091,0.62806 55.46159,-1.12252 76.36209,0.89312 20.9005,2.01564 32.02584,6.00066 51.35462,10.71749 19.32878,4.71683 43.24929,14.76317 63.41179,17.41592 20.1625,2.65275 38.75264,0.74654 54.48056,-1.78625 15.72792,-2.53279 27.58246,-6.12675 38.40436,-11.61061 10.8219,-5.48386 17.4432,-12.25774 23.6677,-20.09529 6.2245,-7.83755 9.961,-18.4396 12.0572,-27.24028 2.0962,-8.80068 2.5469,-17.31428 1.7862,-28.13339 -0.7607,-10.81911 -3.9372,-21.19409 -7.1449,-33.93871 -3.2077,-12.74462 -10.297,-24.754 -11.6106,-37.5112 -1.3136,-12.7572 0.4288,-27.44542 3.5725,-37.5112 3.1437,-10.06578 9.9071,-18.59624 14.2899,-23.66779 4.3828,-5.07155 6.0968,-8.95765 56.2668,-37.95776 50.1701,-29.00011 137.5767,-73.8709 151.3845,-79.041457 13.8078,-5.170556 14.5875,-5.886907 19.6488,-4.912182 5.0613,0.974725 9.1282,4.125402 12.5037,7.591553 3.3755,3.466146 5.3901,7.162526 7.145,12.503736 1.7549,5.34121 3.1869,12.64841 2.2328,19.20216 -0.9541,6.55375 -6.0311,12.39407 -8.0381,18.7556 -2.007,6.36153 -3.3788,11.18943 -4.0191,19.20216 -0.6403,8.01273 0.6021,18.82551 1.3397,28.57997 0.7376,9.75446 2.7528,22.75722 3.1259,29.91964 0.3731,7.16242 -1.0562,10.53324 -0.4466,14.28999 0.6096,3.75675 1.3095,5.74104 3.5726,8.03811 2.2631,2.29707 6.0124,3.12975 8.9312,3.12593 2.9188,-0.004 5.1263,-0.90246 7.5916,-2.67937 2.4653,-1.77691 3.8567,-5.16794 4.9121,-9.3778 1.0554,-4.20986 -0.5133,-8.17422 -2.6793,-15.62967 -2.166,-7.45545 -9.4583,-42.42393 -9.3778,-54.48055 0.081,-12.05662 1.1085,-10.62967 3.1259,-15.1831 2.0174,-4.55343 4.2425,-9.05118 8.4847,-11.61061 4.2422,-2.55943 8.7303,-2.13235 15.1831,-2.23281 6.4528,-0.10046 23.2212,2.67937 23.2212,2.67937 0,0 40.3846,10.41025 50.0149,15.62966 9.6303,5.21941 8.1814,5.02126 10.271,8.48468 2.0896,3.46342 2.2819,6.60039 2.2328,10.71749 -0.049,4.1171 -0.2598,6.00916 -3.126,13.39685 -2.8662,7.38769 -16.5228,29.47309 -16.5228,29.47309 l -100.9229,139.32732 c 0,0 -19.2171,27.78572 -29.4731,38.85089 -10.256,11.06517 -18.0852,18.08314 -31.2594,27.68684 -13.1742,9.6037 -31.5888,20.2281 -48.2287,28.57996 -16.6399,8.35186 -33.8873,15.62357 -51.3546,21.43497 -17.4673,5.8114 -29.0352,9.26674 -53.1408,13.39686 -24.1056,4.13012 -62.7853,7.07512 -91.54524,8.48467 -28.7599,1.40955 -55.90539,2.24013 -80.8277,0.44657 -24.92231,-1.79356 -38.67496,-4.35042 -68.32398,-10.27093 -29.64902,-5.92051 -105.96308,-28.62697 -108.9611,-27.24027 -2.99802,1.3867 -3.70106,1.63243 -5.80531,4.46561 -2.10425,2.83318 -2.9365,10.41153 -4.91218,12.9503 -1.97568,2.53877 -1.59351,1.97352 -4.46562,3.12593 -2.87211,1.15241 -23.98469,-3.80685 -30.36621,-7.14499 -6.38152,-3.33814 -6.32936,-5.26268 -8.93124,-8.03811 -2.60188,-2.77543 -3.74514,-6.24454 -6.69843,-8.48468 -2.95329,-2.24014 -78.5949,-25.90059 -78.5949,-25.90059 L 415.30258,378.60345 c 0,0 -15.84343,-3.35528 -21.43497,-3.12594 -5.59154,0.22934 -6.81206,0.55433 -11.61061,2.67937 -4.79855,2.12504 -16.07623,11.16405 -16.07623,11.16405 0,0 -18.14324,17.21745 -27.24027,28.1334 -9.09703,10.91595 -18.85403,25.50133 -26.79372,37.5112 -7.93969,12.00987 -13.92598,20.01152 -17.83074,28.06993 -3.90476,8.05841 -6.64184,20.26456 -7.36169,23.68638 -0.71985,3.42182 -2.49206,7.88355 -1.89461,19.38713 0.59745,11.50358 6.3165,18.22732 8.85462,24.25443 9.3145,18.79513 9.47407,24.02412 5.14204,42.81192 -1.5481,6.89363 -1.21146,7.50422 -4.72722,18.81363 -3.51575,11.30942 -33.98358,115.37935 -33.98358,115.37935 0,0 -2.16026,10.73875 -4.46562,13.39686 -2.30536,2.65811 -2.73959,2.24043 -6.25187,3.12594 -3.51228,0.88551 -10.47875,-0.14319 -14.73654,0.44656 -4.25779,0.58975 -7.48567,0.4494 -10.71749,2.67937 -3.23182,2.22997 -4.46656,4.53741 -7.14499,10.27092 -2.67843,5.73351 -5.17699,13.19992 -6.69843,24.56091 -1.52144,11.36099 -0.54716,29.53768 0,43.3165 0.54716,13.77882 0.55078,25.21129 3.12594,39.29745 2.57516,14.08616 8.14757,33.10131 12.95029,44.6562 4.80272,11.55489 8.94892,18.84082 13.84342,25.00746 4.8945,6.16664 10.79921,9.35946 13.84342,12.50374 3.04421,3.14428 3.47223,2.74254 4.91218,5.8053 1.43995,3.06276 2.10408,7.91456 2.23281,12.50374 0.12873,4.58918 -0.1506,11.37636 -1.78625,14.73654 -1.63565,3.36018 -1.94484,3.643 -5.35874,5.35874 -3.4139,1.71574 -4.83176,2.42124 -15.1831,2.23281 -10.35134,-0.18843 -33.33368,-6.3725 -45.99588,-8.48468 -12.6622,-2.11218 -23.28076,-1.40518 -29.91965,-4.46561 -6.63889,-3.06043 -7.9139,-4.79019 -10.27092,-8.93124 -2.35702,-4.14105 -2.86561,-9.55385 -2.67938,-14.73655 0.18623,-5.1827 2.91067,-10.63839 4.01906,-15.62966 1.10839,-4.99127 2.77965,-9.19567 2.67937,-14.28998 -0.10028,-5.09431 -1.30836,-6.16661 -3.57249,-15.62967 -2.26413,-9.46306 -7.03025,-23.68577 -8.37633,-36.66296 -1.34608,-12.9772 -2.14299,-15.26539 -1.00147,-36.5732 1.14152,-21.30781 4.56907,-71.39339 7.59155,-95.56425 3.02248,-24.17086 4.81691,-31.72144 7.14499,-43.76307 2.32808,-12.04163 2.5989,-12.70168 6.25187,-28.57996 3.65297,-15.87828 15.8843,-46.66998 25.45403,-74.12928 9.56973,-27.4593 8.54546,-28.63988 17.41591,-53.14086 z");
    path.setFill(null);
    path.setStroke(Color.RED);
    path.setStrokeWidth(5);

    Circle circle = new Circle(10, Color.BLUE);

    Pane root = new Pane(path, circle);
    root.setPadding(new Insets(40));

    PathTransition transition = new PathTransition(Duration.seconds(10), path, circle);
    transition.setCycleCount(Animation.INDEFINITE);
    transition.setInterpolator(Interpolator.LINEAR);
    transition.play();

    Scene scene = new Scene(root);

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