git_clone/thorvg
1
0
Fork 0
mirror of https://github.com/thorvg/thorvg.git synced 2025-06-13 19:44:28 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

example: gradtransf.svg

Browse source 
The file enables to check the correctness of the gradient transformations
and units.
Removed duplicate file.
This commit is contained in:
Mira Grudzinska 2021-10-26 02:13:57 +02:00 • committed by Mira Grudzinska
parent f8a16cf022
commit 0dab343ba1
3 changed files with 64 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
src/examples/images/gradtransf.svg Normal file
View file

@ -0,0 +1,64 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="30 50 180 180">
<defs>
<!-- LINEAR GRAD -->
<!-- Object bbox -->
<linearGradient id="linearGradient1" x1="10%" y1="10%" x2="25%" y2="5%" gradientUnits="objectBoundingBox" spreadMethod="reflect" gradientTransform="matrix(4, 0, 0, 0.5, 0, 0)">
<stop style="stop-color:#ff0000;stop-opacity:1;" offset="0"/>
<stop style="stop-color:#0000ff;stop-opacity:1;" offset="1"/>
</linearGradient>
<linearGradient id="linearGradient2" x1="0.1" y1="0.1" x2="0.25" y2="0.05" gradientUnits="objectBoundingBox" spreadMethod="reflect" gradientTransform="matrix(0.5, 0, 0, 4, 0, 0)">
<stop style="stop-color:#ff0000;stop-opacity:1;" offset="0"/>
<stop style="stop-color:#0000ff;stop-opacity:1;" offset="1"/>
</linearGradient>
<!-- User space -->
<linearGradient id="linearGradient3" x1="4%" y1="4%" x2="10%" y2="15%" gradientUnits="userSpaceOnUse" spreadMethod="reflect" gradientTransform="matrix(4, 1, 0.2, 0.5, 0, 0)">
<stop style="stop-color:#ff0000;stop-opacity:1;" offset="0"/>
<stop style="stop-color:#0000ff;stop-opacity:1;" offset="1"/>
</linearGradient>
<linearGradient id="linearGradient4" x1="7" y1="7" x2="10" y2="40" gradientUnits="userSpaceOnUse" spreadMethod="reflect" gradientTransform="matrix(4, 3, 0, 0.5, 0, 0)">
<stop style="stop-color:#ff0000;stop-opacity:1;" offset="0"/>
<stop style="stop-color:#0000ff;stop-opacity:1;" offset="1"/>
</linearGradient>
<!-- RADIAL GRAD -->
<!-- Object bbox -->
<radialGradient id="radialGradient1" r="10%" cx="100%" cy="50%" gradientUnits="objectBoundingBox" spreadMethod="reflect" gradientTransform="matrix(5.4, 1.1, 1, 0.5, 0, 0.3)">
<stop style="stop-color:#ff00ff;stop-opacity:1;" offset="0"/>
<stop style="stop-color:#00ff00;stop-opacity:1;" offset="1"/>
</radialGradient>
<radialGradient id="radialGradient2" r="0.1" cx="1" cy="0.5" gradientUnits="objectBoundingBox" spreadMethod="reflect" gradientTransform="matrix(0.5, -0.3, -0.3, 4, 0, 0)">
<stop style="stop-color:#ff00ff;stop-opacity:1;" offset="0"/>
<stop style="stop-color:#00ff00;stop-opacity:1;" offset="1"/>
</radialGradient>
<!-- User space -->
<radialGradient id="radialGradient3" r="7%" cx="10%" cy="150%" gradientUnits="userSpaceOnUse" spreadMethod="reflect" gradientTransform="matrix(4, 0.4, 0.9, 0.5, 0, -10)">
<stop style="stop-color:#ff00ff;stop-opacity:1;" offset="0"/>
<stop style="stop-color:#00ff00;stop-opacity:1;" offset="1"/>
</radialGradient>
<radialGradient id="radialGradient4" r="20" cx="20" cy="350" gradientUnits="userSpaceOnUse" spreadMethod="reflect" gradientTransform="matrix(5, 1.1, 0, 0.5, 0, -60)">
<stop style="stop-color:#ff00ff;stop-opacity:1;" offset="0"/>
<stop style="stop-color:#00ff00;stop-opacity:1;" offset="1"/>
</radialGradient>
</defs>
<g transform="matrix(0.9, -0.25, -0.1, 0.8, -12, 80)">
<g transform="translate(20, -5) scale(0.5, 1)">
<rect x="50" y="0" width="100" height="50" fill="url(#linearGradient1)" transform="matrix(0.5, 1, 1.4, 1.4, 0, -100)"/>
<rect x="200" y="0" width="100" height="60" fill="url(#linearGradient2)" transform="matrix(1.1, 0.2, 0.4, 1, -110, -20)"/>
<rect x="50" y="150" width="100" height="70" fill="url(#linearGradient3)" transform="matrix(0.9, 1.1, 1.4, 0.8, -100, -90)"/>
<rect x="200" y="150" width="100" height="70" fill="url(#linearGradient4)" transform="matrix(0.6, -0.1, -0.1, 1.3, 0, -60)"/>
</g>
<g transform="translate(120, 70) scale(0.5, 0.8) rotate(-25)">
<circle cx="50" cy="50" r="80" fill="url(#radialGradient1)" transform="matrix(0.5, -0.1, -0.1, 0.9, 50, 30)"/>
<circle cx="200" cy="50" r="50" fill="url(#radialGradient2)" transform="matrix(0.6, -0.1, 0.1, 1.3, 20, 50)"/>
<circle cx="50" cy="150" r="70" fill="url(#radialGradient3)" transform="matrix(0.8, 0.1, 0.1, 0.6, 30, 100)"/>
<circle cx="200" cy="150" r="70" fill="url(#radialGradient4)" transform="matrix(0.5, -0.3, 0.3, 0.5, 50, 160)"/>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 4 KiB

BIN
src/examples/images/gradtransf.tvg Normal file
View file

Binary file not shown.

BIN
src/examples/images/ietf.svg.tvg
View file

Binary file not shown.