MENU

Advanced Techniques

<image> displays an image file such as a PNG, JPG, or SVG file......OCGPSX
......preserveAspectRatio
......transform
......x="<coord.>": the x coord. of the upper-left corner.
......y="<coord.>": the y coord. of the upper-left corner.
......width="<length>": the width.
......height="<length>": the height.
......xlink:href="<iri>": the source of the image.

<pattern>defines a graphical object to be tiled repeatedly using 'fill' and 'stroke'......OCPSX
......viewBox
......preserveAspectRatio
......x="<coord.>": how the pattern tiles are placed.
......y="<coord.>": how the pattern tiles are placed.
......width="<length>": the width of each displayed tile.
......height="<length>": the height of each displayed tile.
......patternUnits="{userSpaceOnUse | objectBoundingBox}": the coordinate system for 'x', 'y', 'width' and 'height'.
......patternContentUnits="{userSpaceOnUse | objectBoundingBox}": the coordinate system for the contents of the pattern. This attribute has no effect if 'viewBox' is specified.
......patternTransform="<transform-list as described in 7.3.4>": transformation for the pattern.
......xlink:href="<iri>": another pattern which provides the attributes and child elements for inheritance.

<clipPath>defines a shape where overlapping contents can be viewed using the 'clip-path' attribute......OCPS
......transform
......clip-rule (see fill-rule)
......clipPathUnits="{userSpaceOnUse | objectBoundingBox}": the coordinate system for the contents of the 'clipPath'.

<mask> specifies a semi-transparent mask for compositing foreground objects into the current background......OCPS. For each pixel, a mask value is calculated from the RGB and alpha channels of the mask. The effect of a mask is identical to multiplying the alpha channel(transparency) of the given object with the mask's mask value. The brighter/whiter a pixel on the mask, the more opaque is the object.
......x="<coord.>": the x coord. of the upper-left corner.
......y="<coord.>": the y coord. of the upper-left corner.
......width="<length>": the width.
......height="<length>": the height.
......maskUnits="{userSpaceOnUse | objectBoundingBox}": the coordinate system for 'x', 'y', 'width', and 'height'.
......maskContentUnits="{userSpaceOnUse | objectBoundingBox}": the coordinate system for the contents of the 'mask'.