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.

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

use apparently converting what it thinks are shortened hexadecimal colour strings #1241

Closed
Perlkonig opened this issue Dec 14, 2021 · 4 comments

Comments

@Perlkonig
Copy link

Bug report

use() is apparently converting IDs that it thinks are shortened hexadecimal colour strings.

Fiddle

https://jsfiddle.net/krtwhuLb/3/

var canvas = SVG().addTo('#canvas').size('100%', '100%')

// create your example here
const group1 = canvas.defs().group().id("A2");
group1.circle(200).translate(10,10).fill("red");
const group2 = canvas.defs().group().id("A20");
group2.circle(200).translate(50,50).fill("green");
const group3 = canvas.defs().group().id("A200");
group3.circle(200).translate(90,90).fill("blue");
const got1 = canvas.findOne("#A2");
canvas.use(got1);
const got2 = canvas.findOne("#A20");
canvas.use(got2);
const got3 = canvas.findOne("#A200");
canvas.use(got3);

Explanation

If you look at the resulting SVG, you'll see that the <use> tag for #A20 got converted into <use xlink:href="#aa2200"></use>, which of course doesn't exist in defs and so the green circle doesn't display.

@Sphinxxxx
Copy link

.use() calls .attr('href', ..., and it's a sanity check in attr() that expands any hex-color-like value to the full hex color, thus an invalid href id.

@Fuzzyma
Copy link
Member

Fuzzyma commented Dec 14, 2021

Gnaaa I hate to make exceptions in that regard. Maybe I should define attributes that are designed to take colors and only test for those

@Fuzzyma Fuzzyma closed this as completed in dd884bc Sep 3, 2023
@Fuzzyma
Copy link
Member

Fuzzyma commented Sep 3, 2023

Took a while for me to fix but here you go :)

@Fuzzyma
Copy link
Member

Fuzzyma commented Jun 18, 2024

I am sorry, I somehow forgot to publish all the fixes I made. I just released it:
https://github.com/svgdotjs/svg.js/releases/tag/3.2.1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants