SVG Presentation Attributes - SVG: Scalable Vector Graphics
eline enable-background fill fill-opacity fill-rule filter flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight glyph-orientation-horizontal glyph-orientation-vertical image-rendering kerning letter-spacing lighting-color marker-end marker-mid marker-start mask opacity overflow pointer-events shape-rendering solid-color solid-opacity stop-color stop-opacity stroke stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width text-anchor text-decoration text-rendering transform unicode-bidi vector-effect visibility word-spacing writing-mode attributes alignment-baseline it specifies how an object is aligned along the font baseline with r...
...yes pointer-events defines whether or when an element may be the target of a mouse event. value: bounding-box|visiblepainted|visiblefil|visiblestroke|visible |painted|fill|stroke|all|none; animatable: yes shape-rendering hints about what tradeoffs to make as the browser renders <path> element or basic shapes. value: auto|optimizespeed|crispedges|geometricprecision |inherit; animatable: yes solid-color - value:; animatable: - solid-opacity - value:; animatable: - stop-color indicates what color to use at that gradient stop. value: currentcolor|<color>|<icccolor>|inherit; animatable: yes stop-opacity defines the opacity of a given gradient stop. value: <opacity-value>|inherit; animatable: yes stroke defines the color used to paint the outline of the shape. value: <paint>; animatabl...

box-shadow - CSS: Cascading Style Sheets
the shadows are drawn back to front, so the first shadow sits on top of subsequent shadows. when the border-radius is set to 0, as is the default, the corners of the shadow will be, well, corners. had we put in a border-radius of any other value, the corners would have been rounded. we added a margin the size of the widest box-shadow to ensure the shadow doe...

image() - CSS: Cascading Style Sheets
that understand image() also understand the fragment notation. therefore, if the fragment is not understood within image(), the image will be considered invalid. color fallback if a color is specified in image() along with your image sources, it acts as a fallback if the images are invalid and do not appear. in such cases, the image() function renders as if no image were included, generating a solid-color image. as a use case, consider a dark image being used as a background for some white text. a dark background color may be needed for foreground text to be legible, if the image does not render. omitting image sources while including a color is valid and creates a color swatch. unlike declaring a background-color, which is placed under or behind all the background images, this can be used to put...

<solidcolor> - SVG: Scalable Vector Graphics
issing attributes global attributes core attributes global event attributes presentation attributes style attributes specific attributes none. dom interface this element implements the svgsolidcolorelement interface. example svg <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 300 200" height="150"> <defs> <!-- solidcolor is experimental. --> <solidcolor id="mycolor" solid-color="gold" solid-opacity="0.8"/> <!-- lineargradient with a single color stop is a less elegant way to achieve the same effect, but it works in current browsers. --> <lineargradient id="mygradient"> <stop offset="0" stop-color="green" /> </lineargradient> </defs> <text x="10" y="20">circles colored with solidcolor</text> <circle cx="150" cy="65" r="35" stroke-width=...