Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

SVG stroke-dasharray property having no effect #416

Open
DancingHedgehog opened this issue Apr 7, 2022 · 4 comments
Open

SVG stroke-dasharray property having no effect #416

DancingHedgehog opened this issue Apr 7, 2022 · 4 comments

Comments

@DancingHedgehog
Copy link

DancingHedgehog commented Apr 7, 2022 •
edited

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
@DancingHedgehog DancingHedgehog changed the title SVG stroke-dasharray missing SVG stroke-dasharray property having no effect Apr 7, 2022
@kboniadi
Copy link

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

@adamjs
Copy link
Member

adamjs commented Sep 23, 2022

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

@kboniadi
Copy link

kboniadi commented Sep 23, 2022 •
edited

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

@adamjs
Copy link
Member

adamjs commented Sep 23, 2022

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@adamjs @kboniadi @DancingHedgehog