Атрибуты тега круга HTML5 с динамическими значениями angular5

Question

В круговом теге я должен передать stroke-dashoffset значение динамически

<svg>
    <circle class="donut-segment" data-per="100" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#b1c94e" stroke-width="5" stroke-dasharray="100 100" stroke-dashoffset="50"></circle>
</svg>

Я использую angular5
Как я могу передать это?

Answer 1

Получил решение [attr.stroke-dashoffset] = "процент"
Мы можем передать процентное значение динамически

Answer 2

Попробуйте это:

<svg>
    <circle class="donut-segment" data-per="100" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#b1c94e" stroke-width="5" stroke-dasharray="100 100" [stroke-dashoffset]="yourPropNameofComponent"></circle>
</svg>