mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-04-26 01:35:08 +02:00
4dbae64dce
There's a fairly complicated interaction between an SVG gradient's paint transformation and the gradient coordinate transformation required to correctly draw gradient fills. This was especially noticeable when scaling down an SVG, resulting in broken gradient coordinates and graphical glitches. This changes the objectBoundingBox units to immediately map to the bounding box's coordinate system, so we can unify the gradient paint transformation logic and make it a lot simpler. We only need to undo the bounding box offset and apply the paint transformation to fix a lot of gradient fill bugs.
34 lines
1.3 KiB
HTML
34 lines
1.3 KiB
HTML
<!DOCTYPE html>
|
|
<link rel="match" href="../expected/svg-text-effects-ref.html" />
|
|
<meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-723">
|
|
<svg height="200" width="350" xmlns="http://www.w3.org/2000/svg">
|
|
<style>
|
|
.text {
|
|
font: italic 40px serif;
|
|
}
|
|
|
|
.thakis {
|
|
font: bold 70px sans-serif;
|
|
}
|
|
|
|
body {
|
|
background-color: white;
|
|
}
|
|
</style>
|
|
<linearGradient id="gradient">
|
|
<stop offset="0%" stop-color="rgba(255, 0, 0, 1)"/>
|
|
<stop offset="10%" stop-color="rgba(255, 154, 0, 1)"/>
|
|
<stop offset="20%" stop-color="rgba(208, 222, 33, 1)"/>
|
|
<stop offset="30%" stop-color="rgba(79, 220, 74, 1)"/>
|
|
<stop offset="40%" stop-color="rgba(63, 218, 216, 1)"/>
|
|
<stop offset="50%" stop-color="rgba(47, 201, 226, 1)"/>
|
|
<stop offset="60%" stop-color="rgba(28, 127, 238, 1)"/>
|
|
<stop offset="70%" stop-color="rgba(95, 21, 242, 1)"/>
|
|
<stop offset="80%" stop-color="rgba(186, 12, 248, 1)"/>
|
|
<stop offset="90%" stop-color="rgba(251, 7, 217, 1)"/>
|
|
<stop offset="100%" stop-color="rgba(255, 0, 0, 1)"/>
|
|
</linearGradient>
|
|
<text x="20" y="105" class="text" transform="rotate(-10 50 100)">There you go :^)</text>
|
|
<text x="90" y="220" class="thakis" fill="url(#gradient)" transform="rotate(-10 50 100) skewY(-10)">thakis</text>
|
|
</svg>
|