Kozea
Apply style defined in HTML on inline SVG images
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Attribute Selector Test</title>
<style>
svg [font-family~="serif"] {
font-family: monospace;
text-transform: uppercase;
}
</style>
</head>
<body>
<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="green" />
<circle cx="150" cy="100" r="80" fill="black" />
<text x="150" y="125" font-family="serif" font-size="60" text-anchor="middle" fill="white">main</text>
</svg>
</body>
</html>
Firefox screenshot:
Weasyprint 57.0 screenshot:
Hi!
Thanks for this bug report.
The problem is not the attribute selector: you can replace [font-family~="serif"] by text, it won’t work.
Here’s what’s wrong: style defined in the HTML file is not applied to the inline SVG file. That’s the main problem, and this limitation is really hard to fix because everything in WeasyPrint’s CSS validation is based on CSS for HTML, not CSS for SVG. Putting the style tag into the svg tag is the easier workaround for now, and the attribute selector works well here too 😁️.
I’ll change the title to keep track of this problem.
Moreover, many features are not correctly handled in SVG yet. That’s for example the case of text-transform.
