SVG自定义圆形状

-1

我没有使用SVG的经验，并且在创建自定义形状时遇到问题。我想创建下面的形状。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>

请帮助我。

来源

2015-09-21 michael24B

这可能会有帮助：http://svg-edit.googlecode.com/svn-history/r1771/trunk/editor/svg- editor.html – CodeRomeos

@Paulie_D是的，当然，我的不好:) – michael24B

http://tutorials.jenkov.com/svg/index.html –

这个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)

来源

2015-09-21 13:38:40 Stewartside

谢谢你的时间和很好的答案！你也许有任何想法如何分割区域的N值（而不是4）在JavaScript？ – michael24B

这将需要大量的数学计算，并找出正确的算法，也许有些事先尝试自己，并尽可能地得到。 SO是一个帮助解决问题而不是为你开发的地方，但我喜欢这个挑战：P – Stewartside

@ michael24B：正如斯图尔特在他之前的评论中提到的那样，动态地分成n个部门需要你计算一个圆周上的点数，然后使用JS创建该点或路径。你可以看看我的答案[这里]（http://stackoverflow.com/questions/31247310/circle-loading-animation/31250354#31250354）或[这里]（http：// stackoverflow。对于使用这种找到点的方法的几个示例，可以创建一个具有24个或更多点的突发/ 30892219＃30892219/30729543 /创建一个新的尖刺标签。 – Harry

SVG自定义圆形状

回答

相关问题