SVG semi-circle with css

Asked Sep 04 '19 at 11:13

Active Sep 04 '19 at 11:13

Viewed 288 times

I want to make semicircle in svg by appliying attr function of css.
I have tried this till now. I think attr() function of css is not working

<?xml version="1.0" standalone="no" ?>
<svg width="100" height="100">
  <style>
    circle.semiCircle1 {
      stroke-dasharray: calc( (2 * (22/7) * attr(r)) / 2 ); /* 44 */
    }
    circle.semiCircle2 {
      stroke-dasharray: 44;
    }
  </style>
  <circle class="semiCircle1" cx="25" cy="50" r="14" stroke-width="3" stroke="#000" fill="transparent" />
  <circle class="semiCircle2" cx="75" cy="50" r="14" stroke-width="3" stroke="#000" fill="transparent" />
</svg>

asked Sep 04 '19 at 11:13

vaku

1

i think below solution will help https://stackoverflow.com/a/24758621/4030548 – Anji V Sep 04 '19 at 11:37
ok.. so this means I can't do it like that... – vaku Sep 04 '19 at 11:47
1

no you cannot do it like that, attr() works only with `content` for now – Temani Afif Sep 04 '19 at 14:31

SVG semi-circle with css

0 Answers0