SVG自定义圆圈形状

Question

我没有使用SVG的经验，并且在创建自定义形状时遇到问题。我想创建以下形状。

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

<!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>

请帮帮我。

Answer 1

此SVG需要多个元素。

两个为中心圆
四个为外圈

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

<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>

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

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

<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>

一起加入，嘿，请紧记，您应该保持体形。

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

<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>

SVG Documentation (MDN)

SVG自定义圆圈形状

问题描述投票：-1回答：1

1个回答

最新问题

SVG自定义圆圈形状

问题描述 投票：-1回答：1

1个回答

最新问题

问题描述投票：-1回答：1