CODEWITHSUNDEEP
cssinheritancesvgpropertiesattributes
W0lfw00ds
W0lfw00ds

Reputation: 2106

SVG attributes and properties

Below is two example-specifications:

Rect: X-attribute

x = "(coordinate)."

The x-axis coordinate of the side of the rectangle which has the smaller x-axis coordinate value in the current user coordinate system. If the attribute is not specified, the effect is as if a value of "0" were specified.

Animatable: yes.

Color-property

‘color’

Value: (color) | inherit

Initial: depends on user agent

Applies to: elements to which properties ‘fill’, ‘stroke’, ‘stop-color’, ‘flood-color’ and ‘lighting-color’ apply

Inherited: yes

Percentages: N/A

Media: visual

Animatable: yes

It seems that some attributes are called properties. What are the differences?

Upvotes: 1

Views: 661

Answers (1)

Robert Longson
Robert Longson

Reputation: 124249

Some SVG attributes are actually mapped CSS properties. That is to say when you write what looks like an attribute such as fill="blue" that's actually CSS you're defining.

Some CSS properties are inherited by default, some arent't. fill is an inherited CSS property as you've discovered. Properties that are not inherited are called reset properties, to get a reset property to inherit you'd have to explicitly set it as inherit on all the descendent elements.

Some things are not CSS properties at all though, they are simply attributes. Attributes do not inherit at all, although their effects may apply to their children if the attribute's description explicitly says so e.g. like the x and y attribute values apply to the children of <text> elements.

In SVG 1.1 x and y are generally attributes, in SVG 2 they are usually CSS properties.

There are no attributes that do not have an explicit default value (otherwise browsers would not be able to have interoperable implementations).

CSS properties have default values too (they are called initial values). The initial value for fill is black for instance.

Nothing ever throws, there's always a default or initial value.

Upvotes: 3

Related Questions