The path is an url with custom path:{commands}
schema that directly contains SVG's path commands ) used by <path d="{commands}" />
Therefore exisiting SVG WYSIWYG editing tools and collections of icons can be used pretty much as they are - by copying content of d
attribute from SVG into CSS or HTML (to src attribute of an <img>
or a <picture>
).
Sciter supports full set of "d comands" : MmLlHhVvCcSsQqTtAaZz.
Example, this style:
div { background-image: url( path:M0,0 L50,100 L100,0z ); background-size: 100% 100%; background-repeat: no-repeat; fill: red; stroke: blue; }
will show at the element's background triangle with apexes at (0,0), (50,100) and (100,0).
For drawing paths Sciter uses following properties:
These properties are shared with SVG and used for exactly same purpose.
Sometimes there is need to have expandable vector images that can be adjusted to given size.
In order to support such images d-commands were expanded by the following.
Expandable image command sequence shall start from 'E'.
Uppercase d-commands ( MLHVCSQTA ) that expect absolute coordinates may use negative coordinates including negative zero.
Negative coordinate in this case is treated as offset from right or bottom of image rectangle. Therefore this:
background-image: url( path:E M0,0 L-0,-0 ); stroke: blue;
stroke-width: 3px;
will draw single diagonal 3px thick line from left/top to right/bottom corners of element's background area.
You can also define coordinates as proportions of image rendering site. Proportional coordinate is a number 0.0 ... 1.0 followed by '*' (astersisk) sign. This:
background-image: url( path:E M0,0 L1*,1* ); stroke: red;
stroke-width: 3px;
will also draw single diagonal 3px thick line from left/top to right/bottom corners of element's background area.
Proportional coordinates can also be negative - anchored to right / bottom rendering box of the image.