Why this Svg Path element does not works as I expect it to ?

[loloof64]

Hi ! I'm experimenting with the Path widget in slint editor : My experiment.

Here's the code

export component Example inherits Rectangle {
    width: 100px;
    height: 100px;
    Path {
        width: 100px;
        height: 100px;
        commands: "M 0 0 L 0 100";
        stroke: red;
        stroke-width: 1px;
    }
}

What I'm expecting is that the red line inside the rectangle is "appended" to the left side of the rectangle, as I'm defining a vectical line with both points abciss defined to 0.

But instead, the line is centered horizontally in the rectangle : why ?

Also the same for horizontal line.

This is the code this time

export component Example inherits Rectangle {
    width: 100px;
    height: 100px;
    border-color: blue;
    border-width: 1px;
    Path {
        width: 100px;
        height: 100px;
        commands: "M 0 0 L 100 0";
        stroke: red;
        stroke-width: 1px;
    }
}

[loloof64]

After playing more with my playground, it seems that whatever I "draw", it will be centered in the rectangle. So, as I also need to draw a more complex path, I'm trying to adapt the position and the commands coordinates in order to achive my goal.

In fact, I'm just trying to draw a simple arrow between two points (defined dynamically) in my custom component.

[Vadoola]

Try setting the viewbox height and width to the same as the widget height and width: as seen here.

I'm not an expert on paths, and SVGs (which I know the Slint paths are based on) to know the specific details of why this is the way it is, but I know this works from when I was running into the same issue, while I was first learning Slint.

[loloof64]

Thank you very much 😃