Я пытаюсь поместить значок внутри кругового графика SVG, чтобы он отображался следующим образом: SVG пример графика.
Что бы я ни делал, всегда есть небольшой зазор между одной стороной внутреннего значка и путем SVG, который отображается как это. Я думаю, что проблема связана с тем фактом, что степень дуги для кругового графика SVG не является идеальным кругом.
Вот все, что я уже пробовал:
Создал статический png изображения внутреннего значка, чтобы он не был идеальным кругом, а затем обернул вокруг него SVG.
Создал SVG в иллюстраторе с внутренним значком в формате png с двумя внешними путями: один для серой заливки вокруг и один для зеленой заливки, представляющей 50%. Когда я экспортирую файл, параметр d отображается на основе координат, а не процентов.
<path d="M82,153.53C122.23,153.41,153.2,121,153.46,82,153.69,43.3,122.59,10.94,82,10.49"
fill="none" stroke="#7aef93"
stroke-miterlimit="10" stroke-width="15" />
Я начал экспериментировать с этим на CodePen, но не продвинулся далеко.
Это вообще возможно достичь? Буду очень признателен за любую помощь/отзыв!