Question

我没有SVG的经验，我在创建自定义形状时遇到问题。我想创造下面的形状。

切片和所有物线的份额应动态生成。所有切片都是一样的。例如：如果我们有4个切片，每个切片将有25％的值，如果有10个切片，我们将有10个切片，10％。

＆＃13;

<!DOCTYPE html>
<html>

<body>

  <svg width="800" height="800">
    <circle cx="400" cy="400" r="300" stroke="black" stroke-width="2" fill="red" />
    <circle cx="400" cy="400" r="80" stroke="black" stroke-width="2" fill="blue" />
    <path d="M 400 400 H 480 320" stroke="black" stroke-width="2" fill="none" />Sorry, your browser does not support inline SVG.
  </svg>

</body>

</html>

＆＃13;

请帮帮我。

Answer 1

此SVG需要多个元素。

两个中心圈
四个外圈

首先，外圈中的4个部分需要4个区域。这可以这样做：

＆＃13;

<svg width="50%" viewbox="0 0 100 100">
  <path d="M50,50 L0,50 A50,50 0 0,1 50,0" fill="red"></path>
  <path d="M50,50 L100,50 A50,50 0 0,1 0,50" fill="blue"></path>
  <path d="M50,50 L100,50 A50,50 0 0,1 50,100" fill="green"></path>
  <path d="M50,50 L50,0 A50,50 0 0,1 100,50" fill="yellow"></path>
</svg>

＆＃13;

对于内部区域，您将需要两个带有文本的段。

＆＃13;

text {
  fill: white;
  font-size: 16px;
}

＆＃13;

<svg width="50%" viewbo0x="0 0 100 100">
  <path d="M0,50 A50,50 0 0,1 100,50z" fill="purple"></path>
  <path d="M0,50 A-50,-50 0 1,0 100,50z" fill="green"></path>
  <text x="18" y="40">Some text</text>
  <text x="15" y="70">Bottom text</text>
</svg>

＆＃13;

加入他们，嘿，你应该有自己的形状。

＆＃13;

text {
  font-size: 2.5em;
  fill: white;
}

＆＃13;

<svg width="50%" viewbox="0 0 1000 1000">
  <path d="M500,500 L0,500 A500,500 0 0,1 500,0" fill="red"></path>
  <path d="M500,500 L1000,500 A500,500 0 0,1 0,500" fill="blue"></path>
  <path d="M500,500 L1000,500 A500,500 0 0,1 500,1000" fill="green"></path>
  <path d="M500,500 L500,0 A500,500 0 0,1 1000,500" fill="yellow"></path>
  <path d="M350,500 A100,100 0 0,1 650,500z" fill="purple" x="45" y="45"></path>
  <path d="M350,500 A-100,-100 0 1,0 650,500z" fill="pink"></path>
  <text x="420" y="450">Some text</text>
  <text x="410" y="550">Bottom text</text>
</svg>

＆＃13;

SVG Documentation (MDN)

SVG自定义圆形

1 个答案: