mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-04-25 17:25:08 +02:00
Previously, we only supported very basic numbers and a single level of
text positioning support in the `x`, `y`, `dx` and `dy` attributes in
`<text>` and `<tspan>` SVG elements.
This improves our support for them in the following ways:
* Any `length-percentage` or `number` type value is accepted;
* Nested `<text>` and `<tspan>` use the 'current text position'
concept to determine where the next text run should go;
* We expose the attributes' values through the API.
Though we still do not support:
* Applying the `rotate` attribute;
* Applying transformations on a per-character basis.
* Proper horizontal and vertical glyph advancing (we just use the path
bounding box for now).
10 lines
385 B
HTML
10 lines
385 B
HTML
<!DOCTYPE html>
|
|
<svg width="300" height="120" viewBox="0 0 300 120" xmlns="http://www.w3.org/2000/svg">
|
|
<rect width="100%" height="100%" fill="black" />
|
|
<text x="20" y="30%" fill="white" font-family="sans-serif" font-size="28">
|
|
<tspan dx="20" dy="0">foo</tspan>
|
|
<tspan dx="20" dy="20%">bar</tspan>
|
|
<tspan dx="10%" dy="35">baz</tspan>
|
|
</text>
|
|
</svg>
|