clip-rule - SVG: Scalable Vector Graphics
« svg attribute reference home the clip-rule attribute only applies to graphics elements that are contained within a <clippath> element. the clip-rule attribute basically works as the fill-rule attribute, except that it applies to <clippath> definitions. the following fragment of code will cause an evenodd clipping rule to be applied to the clipping path because clip-rule is specified on the <path> element that defines the clipping shape: <g> <clippath id="myclip"> <path d="..." clip-rule="evenodd" /> </clippath> <rect clip-path="url(#myclip)" ... ...
... cause an evenodd clipping rule to be applied to the clipping path because clip-rule is specified on the <path> element that defines the clipping shape: <g> <clippath id="myclip"> <path d="..." clip-rule="evenodd" /> </clippath> <rect clip-path="url(#myclip)" ... /> </g> whereas the following fragment of code will not cause an evenodd clipping rule to be applied because the clip-rule is specified on the referencing element, not on the object defining the clipping shape: <g> <clippath id="myclip"> <path d="..." /> </clippath> <rect clip-path="url(#myclip)" clip-rule="evenodd" ... /> </g> as a presentation attribute, it also can be used as a property directly inside a css stylesheet usage context categories presentation attribute va...
...edition) nonzero see description of fill-rule property. evenodd see description of fill-rule property. ...
...And 3 more matches

SVG Presentation Attributes - SVG: Scalable Vector Graphics
svg presentation attributes are css properties that can be used as attributes on svg elements. ...
...ne relative to the dominant-baseline of the parent text content element. value: auto|baseline|super|sub|<percentage>|<length>|inherit; animatable: yes clip deprecated it defines what portion of an element is visible. value: auto|<shape()>|inherit; animatable: yes clip-path it binds the element it is applied to with a given <clippath> element. value: none|<funciri>|inherit; animatable: yes clip-rule it indicates how to determine what side of a path is inside a shape in order to know how a <clippath> should clip its target. value: nonezero|evenodd|inherit; animatable: yes color it provides a potential indirect value (currentcolor) for the fill, stroke, stop-color, flood-color and lighting-color presentation attributes. value: <color>|inherit; animatable: yes color-interpolation it spec...

SVG Attribute reference - SVG: Scalable Vector Graphics
help you learn which elements support them and how they work. ...
...ibutes class, style conditional processing attributes externalresourcesrequired, requiredextensions, requiredfeatures, systemlanguage. xlink attributes xlink:href, xlink:type, xlink:role, xlink:arcrole, xlink:title, xlink:show, xlink:actuate presentation attributes note that all svg presentation attributes can be used as css properties. ...

SVG Guidelines
r effects specification) id (id on root element has no effect) xmlns:xlink attribute when there are no xlink:href attributes used throughout the file other unused xml namespace definitions xml:space when there is no text used in the file other empty tags, this may be obvious, but those are sometimes found in svgs unreferenced ids (usually on gradient stops, but also on shapes or paths) clip-rule attribute when the element is not a descendant of a <clippath> fill-rule attribute when the element is a descendant of a <clippath> unreferenced/unused clip paths, masks or defs (example) styling basics privilege short lowercase hex for colors don't use excessive precision for numeric values (usually comes from illustrator) use descriptive ids avoid inline styles and use class names o...

CSS Masking - CSS: Cascading Style Sheets
css masking is a css module that defines means, including masking and clipping, for partially or fully hiding portions of visual elements. reference properties clip clip-path clip-rule mask mask-border mask-border-mode mask-border-outset mask-border-repeat mask-border-slice mask-border-source mask-border-width mask-clip mask-composite mask-image mask-mode mask-origin mask-position mask-repeat mask-size mask-type specifications specification status comment css masking module level 1 candidate recommendation scalable vector graphics (svg) 1.1 (second edition)the definition of 'mask' in that specification. recommendation initial definition ...

requiredFeatures - SVG: Scalable Vector Graphics
ure#colorprofile the browser supports the <color-profile> element http://www.w3.org/tr/svg11/feature#gradient the browser supports the <lineargradient>, <radialgradient> and <stop> elements http://www.w3.org/tr/svg11/feature#pattern the browser supports the <pattern> element http://www.w3.org/tr/svg11/feature#clip the browser supports the <clippath> element and the clip-path, clip-rule attributes http://www.w3.org/tr/svg11/feature#basicclip the browser supports the <clippath> element and the clip-path attribute http://www.w3.org/tr/svg11/feature#mask the browser supports the <mask> element http://www.w3.org/tr/svg11/feature#filter the browser supports the <filter>, <feblend>, <fecolormatrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuse...

<a> - SVG: Scalable Vector Graphics
type: <url> ; default value: none; animatable: yes global attributes core attributes most notably: id, lang, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, document element event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility xlink attributes most notably: xlink:title aria attributes aria-activedescendant,...

<altGlyph> - SVG: Scalable Vector Graphics
ent. ...

<circle> - SVG: Scalable Vector Graphics
y properties, meaning those attributes can also be used as css properties for that element. ...

<clipPath> - SVG: Scalable Vector Graphics
ts defines the coordinate system for the contents of the <clippath> element. ...

<defs> - SVG: Scalable Vector Graphics
ent> </defs> <!-- using my graphical objects --> <use x="5" y="5" xlink:href="#mycircle" fill="url('#mygradient')" /> </svg> attributes global attributes core attributes most notably: id lang styling attributes class, style event attributes global event attributes, document element event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility usage notes categoriescontainer element, structural elementpermitted contentany nu...

<ellipse> - SVG: Scalable Vector Graphics
y properties, meaning those attributes can also be used as css properties for that element. ...

<foreignObject> - SVG: Scalable Vector Graphics
properties for that element. ...

<g> - SVG: Scalable Vector Graphics
cy="60" r="25" /> </g> </svg> attributes this element only includes global attributes global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, a...

<line> - SVG: Scalable Vector Graphics
tal path length in user units. ...