svg.美国队长
Ale*_*res 0 html javascript css svg
我怎么能用svg做这个明星？我必须使用svg并尝试使用积分但不能正常工作.我不能使用元素路径.谢谢.
<!DOCTYPE html>
<html>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="45" fill="white" stroke="red" stroke-width="10" />
<circle cx="50" cy="50" r="30" stroke="red" stroke-width="10" fill="blue" />
<polygon points="50,25 30,80 75,40 25,40 70,70" style="fill:white;"/>
</svg>
</body>
</html>如果你想获得pentastar最准确的分数,你可以从底层的五边形轻松获得它们.
一个简单的js函数来获取这些点是这样的(REPL,顺便说一句,你可以用于任何n个边的多边形):
var n = 5;
var points = [];
for (var i=0; i < n; i++) {
var x = 50;
var y = -50;
var r = 25;
points.push([x + r * Math.sin(2 * Math.PI * i / n),
y + r * Math.cos(2 * Math.PI * i / n)]);
}
结果是时钟方式的五边形点,从顶部开始(使用所有值作为正值):
[ [ 50, -25 ],
[ 73.77641290737884, -42.27457514062631 ],
[ 64.69463130731182, -70.22542485937369 ],
[ 35.30536869268818, -70.22542485937369 ],
[ 26.22358709262116, -42.27457514062632 ] ]
你的订单会是points[x], where x = 0, 3, 1, 4, 2.
并使用它们作为示例四舍五入到最近的像素:
<!DOCTYPE html>
<html>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="45" fill="white" stroke="red" stroke-width="10" />
<circle cx="50" cy="50" r="30" stroke="red" stroke-width="10" fill="blue" />
<polygon points="50,25 35,70 73,42 26,42 65,70" style="fill:white;"/>
</svg>
</body>
</html>- 这比我猜测的答案要好. (2认同)
| 归档时间： |
|
| 查看次数： |
173 次 |
| 最近记录： |