Различия между одним и тем же SVG элементом в Chrome и Firefox, как исправить?

Question

Имеется следующий SVG элемент

<svg height="20" width="20" viewBox="0 0 20 20" class="maplibre-gl-directions-bearings-control__waypoint-image" style="width: 50px; height: 50px; opacity: 1;"><circle r="5" cx="10" cy="10" fill="transparent" stroke="rgba(109, 38, 215, 0.65)" stroke-width="10" stroke-dasharray="calc(12.5 * 31.42 / 100) 31.42" transform="rotate(-61.5)" style="transform-origin: 10px 10px;"></circle><circle r="6" cx="10" cy="10" fill="rgb(109, 38, 215)"></circle></svg>

Он отображается корректно в Chrome:

А вот в Firefox он выглядит по-другому:

Вопрос: что не нравится Firefox'у и что сделать чтобы исправить ситуацию?

Answer 1

Я не уверен что в stroke-dasharray можно использовать calc, но судя по коду вам на самом деле нужно просто нарисовать 1/8 круга. Можно это делать без calc и вычисления длины окружности при помощи pathLength:

<svg height="20" width="20" viewBox="0 0 20 20" style="width: 50px; height: 50px">
    <circle r="5" cx="10" cy="10" fill="transparent"
        stroke="rgba(109, 38, 215, 0.65)" stroke-width="10"
        pathLength="100"
        /* объявляем что длина окружности 100 */
        stroke-dasharray="12.5 100"
        /* и не заморачиваемся сложными вычислениями */
        transform="rotate(-61.5)"
        style="transform-origin: 10px 10px;">
    </circle>
    <circle r="6" cx="10" cy="10" fill="rgb(109, 38, 215)">
    </circle>
</svg>

БЛОГ НА HUSL

Различия между одним и тем же SVG элементом в Chrome и Firefox, как исправить?

Ответы (1 шт):