SVG stroke-dasharray property having no effect

DancingHedgehog commented 2 years ago

Hello from Mutate! We thought of displaying ability cooldowns by using a pie chart that would fill up in relation to % time remaining.

To realize this we utilized SVG with stroke-dasharray, which looks fine in chrome:

piechart_chrome

<html>
<head>
<style>
    circle {
        fill: #655;
        stroke: yellowgreen;
        stroke-width: 50;
        stroke-dasharray: 60 158; /* 2π × 25 ≈ 158 */
    }
    svg {
        transform: rotate(-90deg);
        background: #655;
        border-radius: 50%;
    }
</style>
</head>
    <body>
        <div>
            <svg width="100" height="100">
                <circle r="25" cx="50" cy="50" />
            </svg>
        </div>
    </body>
</html>

But now in our engine using Ultralight, there is no visual representation of stroke-dasharray: Ultralight version: Latest nightly build available today (on 07/04/2022).

piechart_ultralight

Please start supporting stroke-dasharray!

Jens Mutate

kboniadi commented 2 years ago

@DancingHedgehog were you ever able to find a workaround for this? It still seems like this not natively supported in ultralight.

adamjs commented 2 years ago

It's supported now, should be landing on 1.3-trunk early next week.

kboniadi commented 2 years ago

@adamjs sorry for the ping. Are we able to access unstable/pre-release builds? For example, the one you just mentioned?

adamjs commented 2 years ago

Yes you can always access latest builds at: https://github.com/ultralight-ux/Ultralight#getting-the-latest-sdk

Those bins are auto-generated by the buildbots about 45 mins after each commit to the top-level ultralight-ux/Ultralight repo.

I'm cleaning up a few rendering issues for 1.3 now and will likely update Monday.

ultralight-ux / Ultralight

SVG stroke-dasharray property having no effect #416