Question

在这里，我尝试了4个扇区的svg圈，但在这里我被困于创建5个扇区的svg圈。所有5个扇区的svg圈必须大小均等。附有代码段。期待这些部门的动画。请有人帮我。

.svgStyle {
   border-radius: 15px;
}

<!doctype html>
<html lang="en">

<head>
    <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
</head>

<body style="background-color:#f7f7f7 ">
    <div style="margin: 5% auto; width: 404px;">       
        <div>
            <div style="margin-bottom: -10px;width: 104%;">
                <div style="display: inline-block;margin: 8px;">
                    <svg width="200" height="200" class="svgStyle" viewBox="0 0 100 100">
                        <defs>
                            <linearGradient id="gradient">
                                <stop offset="0%" stop-color="#a18cd1" />
                                <stop offset="100%" stop-color="#fbc2eb" />
                            </linearGradient>
                        </defs>
                        <circle cx="100" cy="100" r="100" fill="url(#gradient)"> </circle>
                        <circle cx="100" cy="100" r="80" fill="#fff"> </circle>
                        <circle cx="100" cy="100" r="30" fill="#f7f7f7"> </circle>
                    </svg>
                </div>
                <div style="display: inline-block;">
                    <svg width="200" height="200" class="svgStyle" viewBox="100 0 100 100">
                        <circle cx="100" cy="100" r="100" fill="#fcba03"></circle>
                        <circle cx="100" cy="100" r="80" fill="#fff"> </circle>
                        <circle cx="100" cy="100" r="30" fill="#f7f7f7"> </circle>
                    </svg>
                </div>
            </div>
            <div style="width: 104%;">
                <div style="display: inline-block;margin: 8px;">
                    <svg width="200" height="200" class="svgStyle" viewBox="0 100 100 100">
                        <circle cx="100" cy="100" r="100" fill="#5dc269"></circle>
                        <circle cx="100" cy="100" r="80" fill="#fff"> </circle>
                        <circle cx="100" cy="100" r="30" fill="#f7f7f7"> </circle>
                    </svg>
                </div>

                <div style="display: inline-block;">
                    <svg width="200" height="200" class="svgStyle" viewBox="100 100 100 100">
                        <circle cx="100" cy="100" r="100" fill="#d6475f"></circle>
                        <circle cx="100" cy="100" r="80" fill="#fff"> </circle>
                        <circle cx="100" cy="100" r="30" fill="#f7f7f7"> </circle>
                    </svg>
                </div>
            </div>
        </div>
    </div>

</body>

</html>

SVG /画布-带有5个扇形大小相等的动画的圆圈

0 个答案: