с css л oop в SVG

Question

HTML Файл

<svg width="500" height="500"  class="c">
  <circle class="c1" stroke-width="5"/>
  <circle class="c2" />
  <circle class="c3" />
  <circle class="c4" />
  <circle class="c5" />
  <circle class="c6" />
  <circle class="c7" />
  <circle class="c8" />
  <circle class="c9" />
  <circle class="c10" />
 </svg>

Я хочу l oop в s css и назначить радиус как i * 1.16 и другие параметры. не уверен в синтаксисе

S CSS ФАЙЛ:

$GOLDEN-CIRCLE-COUNT: 10;
$BASE-COLOR:red;

   @for $i from 1 through $GOLDEN-CIRCLE-COUNT {

      svg:nth-child(c + &{$i}) { 
        r: $i*1.16;
        stroke: red;
        cx: 250px;
        cy: 250px;
        background-color: lighten($BASE-COLOR, $i * 5%);
      } 
    }

Answer 1

Вы должны использовать fill, а не background-color. Также вы должны уменьшить радиус, а не увеличивать его, потому что последний будет сверху, поэтому он должен быть наименьшим

$GOLDEN-CIRCLE-COUNT: 10;
$BASE-COLOR:red;

@for $i from 1 through $GOLDEN-CIRCLE-COUNT {
    svg circle[class="c#{$i}"] { 
        r: 250/($i*1.16);
        stroke: blue;
        cx: 250px;
        cy: 250px;
        fill: lighten($BASE-COLOR, $i * 5%);
    } 
}

svg circle[class=c1] {
  r: 215.5172413793;
  stroke: blue;
  cx: 250px;
  cy: 250px;
  fill: #ff3333;
}

svg circle[class=c2] {
  r: 107.7586206897;
  stroke: blue;
  cx: 250px;
  cy: 250px;
  fill: #ff6666;
}

svg circle[class=c3] {
  r: 71.8390804598;
  stroke: blue;
  cx: 250px;
  cy: 250px;
  fill: #ff9999;
}

svg circle[class=c4] {
  r: 53.8793103448;
  stroke: blue;
  cx: 250px;
  cy: 250px;
  fill: #ffcccc;
}

svg circle[class=c5] {
  r: 43.1034482759;
  stroke: blue;
  cx: 250px;
  cy: 250px;
  fill: white;
}

svg circle[class=c6] {
  r: 35.9195402299;
  stroke: blue;
  cx: 250px;
  cy: 250px;
  fill: white;
}

svg circle[class=c7] {
  r: 30.7881773399;
  stroke: blue;
  cx: 250px;
  cy: 250px;
  fill: white;
}

svg circle[class=c8] {
  r: 26.9396551724;
  stroke: blue;
  cx: 250px;
  cy: 250px;
  fill: white;
}

svg circle[class=c9] {
  r: 23.9463601533;
  stroke: blue;
  cx: 250px;
  cy: 250px;
  fill: white;
}

svg circle[class=c10] {
  r: 21.5517241379;
  stroke: blue;
  cx: 250px;
  cy: 250px;
  fill: white;
}

<svg width="500" height="500" class="c" viewBox='0 0 500 500'>
  <circle class="c1" stroke-width="5"/>
  <circle class="c2" />
  <circle class="c3" />
  <circle class="c4" />
  <circle class="c5" />
  <circle class="c6" />
  <circle class="c7" />
  <circle class="c8" />
  <circle class="c9" />
  <circle class="c10" />
</svg>

Answer 2

Может быть, вы хотите это?

$GOLDEN-CIRCLE-COUNT: 10;
$BASE-COLOR:red;

@for $i from 1 through $GOLDEN-CIRCLE-COUNT {
    svg circle[class="c#{$i}"] { 
        r: $i*1.16;
        stroke: red;
        cx: 250px;
        cy: 250px;
        background-color: lighten($BASE-COLOR, $i * 5%);
    } 
}

svg circle[class="c1"] {
  r: 1.16;
  stroke: red;
  cx: 250px;
  cy: 250px;
  background-color: #ff1a1a;
}

svg circle[class="c2"] {
  r: 2.32;
  stroke: red;
  cx: 250px;
  cy: 250px;
  background-color: #ff3333;
}

svg circle[class="c3"] {
  r: 3.48;
  stroke: red;
  cx: 250px;
  cy: 250px;
  background-color: #ff4d4d;
}

svg circle[class="c4"] {
  r: 4.64;
  stroke: red;
  cx: 250px;
  cy: 250px;
  background-color: #ff6666;
}

svg circle[class="c5"] {
  r: 5.8;
  stroke: red;
  cx: 250px;
  cy: 250px;
  background-color: #ff8080;
}

svg circle[class="c6"] {
  r: 6.96;
  stroke: red;
  cx: 250px;
  cy: 250px;
  background-color: #ff9999;
}

svg circle[class="c7"] {
  r: 8.12;
  stroke: red;
  cx: 250px;
  cy: 250px;
  background-color: #ffb3b3;
}

svg circle[class="c8"] {
  r: 9.28;
  stroke: red;
  cx: 250px;
  cy: 250px;
  background-color: #ffcccc;
}

svg circle[class="c9"] {
  r: 10.44;
  stroke: red;
  cx: 250px;
  cy: 250px;
  background-color: #ffe6e6;
}

svg circle[class="c10"] {
  r: 11.6;
  stroke: red;
  cx: 250px;
  cy: 250px;
  background-color: white;
}

<svg width="500" height="500" class="c">
  <circle class="c1" stroke-width="5"/>
  <circle class="c2" />
  <circle class="c3" />
  <circle class="c4" />
  <circle class="c5" />
  <circle class="c6" />
  <circle class="c7" />
  <circle class="c8" />
  <circle class="c9" />
  <circle class="c10" />
</svg>