javascript - parametri complexi pentru tagurile svg (analog calc() pentru css)

Mă poți spune, te rog, dacă etichetele svg pot seta parametri complexi?

Pentru CSS, există comanda calc(), de exemplu:

width: calc (50% - 10px);

Există ceva de genul acesta pentru svg, de exemplu:

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

?

Răspuns #1

Răspunsul scurt este „nu”. Sau cel puțin nu într-un mod compatibil cu toate browserele în acest moment.

Totuși, în standardul SVG2 (care încă este implementat de browsere), atributele geometrice, cum ar fi r, pot fi stilizate cu CSS.

Chrome a implementat această funcție, dar (pe cât știu) este singurul. Așadar, exemplul următor va funcționa în Chrome, dar nu (încă) în alte browsere.

svg {
  background-color: linen;
}

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