CODEWITHSUNDEEP
javascriptcsssvgparameterstags
Zhihar
Zhihar

Reputation: 1428

complex parameters for svg tags (analogue calc() for css)

Can you please tell me whether svg tags can set complex parameters?

For css, there is the calc () command, for example:

width: calc (50% - 10px);

Is there something like this for svg, for example:

<circle r = 'calc (50% - 2px)'>

?

Upvotes: 6

Views: 567

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101820

The short answer is "no". Or at least not in a cross-browser way at the moment.

However in the SVG2 standard (which is still being implemented by browsers), geometry attributes, such as r, can be styled with CSS.

Chrome has implemented this feature, but (AFAIK) it is the only one. So the following example will work in Chrome, but not (yet) in other browsers.

svg {
  background-color: linen;
}
<svg width="200" height="200">
  <circle cx="100" cy="100" style="r: calc(50% - 10px);" fill="red"/>
</svg>

Upvotes: 6

Related Questions