Оформление SVG-фигур / Испытание: леденец [20/20] 99%

Курсы §36. Знакомство с SVG
23

Вот решение на 100%

<svg width="300" height="290">

  <rect fill="khaki" stroke="darkkhaki" width="10" height="70" x="145" y="220"></rect>

  <circle stroke="darkkhaki" r="100" cx="150" cy="125" fill="gold"></circle>

  <circle r="70" cx="150" cy="125" fill="none" stroke="tomato" stroke-width="20" stroke-dasharray="45"></circle>

  <circle r="70" cx="150" cy="125" fill="none" stroke="darkorange" stroke-width="20" stroke-dasharray="45" stroke-dashoffset="45"></circle>

  <circle r="50" cx="150" cy="125" fill="none" stroke="yellowgreen" stroke-width="20"></circle>

</svg>
24

В Испытание: леденец [20/20] в задании записано:

Добавьте элементам circle необходимые атрибуты, чтобы получился полосатый леденец.
Значения толщины обводки, длины пунктира и пробела, а также сдвига обводки кратны 5 .

В связи с опубликованным Вами правильного прохождения на 100% предлагаю изменить условие испытания на:

Добавьте и измените элементам circle необходимые атрибуты, чтобы получился полосатый леденец.
Значения радиуса, толщины обводки, длины пунктира и пробела, а также сдвига обводки кратны 5 .

2 лайка
25

Сейчас проходил это задание и столкнулся с проблемой в 99%. Благодаря комментарию выше, который вставили в описание к заданию, я сразу начал играться радиусом и все на глаз получилось, кроме пиксельных отличий на прерывистой обводке. Спасение в указании двум этим обводкам прерывистости и смещении одной из них на величину шага. 100% достигнуто.

26

А почему такой код не проходит? Ведь на 100% должен совпадать. Ведь там по 10%, делиться должен на 10 равных частей, а всего 97% выдаёт.
`

  <rect fill="khaki" stroke="darkkhaki" width="10" height="70" x="145" y="220"></rect>

  <circle stroke="darkkhaki" r="100" cx="150" cy="125" fill="gold"></circle>

  <circle r="50" cx="150" cy="125" fill="none" stroke="tomato" fill="none"stroke-width="60" stroke-dasharray="10%"></circle>

  <circle r="50" cx="150" cy="125" fill="none" stroke="darkorange" fill="none"stroke-width="60" stroke-dasharray="10%" stroke-dashoffset="10%"></circle>

  <circle r="50" cx="150" cy="125" fill="gold" stroke="yellowgreen" stroke-width="20" ></circle>

</svg>`