如何制作“弯曲矩形"?在SVG中? [英] How to make a "bent rectangle" in SVG?

问题描述

我有一个正在处理的项目，需要我用圆形按钮导航，这些按钮看起来像下图所示的钢铁侠周围的条形图.我可以绘制简单的形状并足够好地按照教程进行操作，但是我不知道如何绘制具有弯曲形状的这些条，如下图所示.

I have a project I am working on that requires me to make a circular navigation with buttons that look like the bars around the Iron Man thing pictured below. I can draw simple shapes and follow tutorials well enough, but I am lost on how to draw these bars with the curved shape as in the picture below.

我提供了一个剪切路径示例，但我认为SVG是我需要做的.

I have included a clip path example, but I think SVG is what I need to do.

HTML

<div class="button"></div>

CSS

.button {
    background: radial-gradient(circle at 50% 160%,transparent 45%,red 44.5%,red 85%,transparent 85%);
        -webkit-clip-path: polygon(5% 0, 100% 0, 65% 90%, 35% 90%);
        clip-path: polygon(20% 0, 80% 0, 65% 90%, 35% 90%);
}

推荐答案

是的，这里是SVG.基本形状:

Yeah SVG is the answer here. The base shape:

<svg version="1.1" baseProfile="full" width="50" height="50" xmlns="http://www.w3.org/2000/svg">
  <path d="M 50 0 A 50 50 0 0 0 14.6 14.6 L 28.79 28.79 A 30 30 0 0 1 50 20 Z"></path>
</svg>

这将使用path元素构建形状，如下所述

This builds the shape using a path element as described here https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths and a little trigonometry.

这篇关于如何制作“弯曲矩形"?在SVG中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！