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

examples: add svg samples.

Browse source
This commit is contained in:
Hermet Park 2023-10-13 11:06:38 +09:00
parent 84a19ece7e
commit f37bbce2f5
2 changed files with 44 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
src/examples/images/masking.svg Normal file
View file

@ -0,0 +1,25 @@
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<mask id="myMask1" maskContentUnits="userSpaceOnUse">
<rect fill="black" x="0" y="0" width="100%" height="100%" />
<circle fill="white" cx="50" cy="50" r="35" />
</mask>
<mask id="myMask2" maskContentUnits="objectBoundingBox">
<rect fill="black" x="0" y="0" width="100%" height="100%" />
<circle fill="white" cx=".5" cy=".5" r=".35" />
</mask>
<!-- Some reference rect to materialized the mask -->
<rect id="r1" x="0" y="0" width="45" height="45" />
<rect id="r2" x="0" y="55" width="45" height="45" />
<rect id="r3" x="55" y="55" width="45" height="45" />
<rect id="r4" x="55" y="0" width="45" height="45" />
<!-- The first 3 rect are masked with useSpaceOnUse units -->
<use mask="url(#myMask1)" href="#r1" fill="red" />
<use mask="url(#myMask1)" href="#r2" fill="green" />
<use mask="url(#myMask1)" href="#r3" fill="blue" />
<!-- The last rect is masked with objectBoundingBox units -->
<use mask="url(#myMask2)" href="#r4" fill="magenta" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

19
src/examples/images/multipath+matrix.svg Normal file
View file

@ -0,0 +1,19 @@
<svg width="160" height="80" viewBox="0 0 80 40" xmlns="http://www.w3.org/2000/svg">
<mask id="a">
<path d="m0 0h16v10a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2 2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h-10z"
fill="#fff"/>
</mask>
<path d="m30.807 22.736a2.8006 2.8006 0 0 0-2.8006 2.8006v2.8006h5.6013v5.6013h2.8006a2.8006 2.8006 0 0 0 2.8006-2.8006v-5.6013a2.8006 2.8006 0 0 0-2.8006-2.8006zm2.8006 11.203h-5.6013v-5.6013h-2.8006a2.8006 2.8006 0 0 0-2.8006 2.8006v5.6013a2.8006 2.8006 0 0 0 2.8006 2.8006h5.6013a2.8006 2.8006 0 0 0 2.8006-2.8006z"
fill="#5fb2ff" stroke-width="2.8007"/>
<path transform="matrix(2.8006 0 0 2.8006 -2.8006 -2.47)" d="m8 2 6 3v6l-6 3-6-3v-6zm0 12v-6l6-3m-6 3-6-3"
fill="none" mask="url(#a)" stroke="#fc7f7f" stroke-width="2"/>
<mask id="b">
<path d="m0 0h16v10a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2 2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h-10z"
fill="#fff"/>
</mask>
<path d="m71.533 22.983a2.8006 2.8006 0 0 0-2.8006 2.8006v2.8006h5.6013v5.6013h2.8006a2.8006 2.8006 0 0 0 2.8006-2.8006v-5.6013a2.8006 2.8006 0 0 0-2.8006-2.8006zm2.8006 11.203h-5.6013v-5.6013h-2.8006a2.8006 2.8006 0 0 0-2.8006 2.8006v5.6013a2.8006 2.8006 0 0 0 2.8006 2.8006h5.6013a2.8006 2.8006 0 0 0 2.8006-2.8006z"
fill="#5fb2ff" stroke-width="2.8007"/>
<path transform="matrix(2.8006 0 0 2.8006 37.925 -2.2222)" d="m4 6a4 4 0 0 1 8 0v4a4 4 0 0 1-8 0zm0 1.25a4 1.6 0 0 0 8 0m-4-5v12"
fill="none" mask="url(#b)" stroke="#fc7f7f" stroke-width="2"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB