svg中的<circle>元素，是用来绘制圆形的，不过<circle>有一些属性或许你还不太了解，其实利用它的属性值，可以绘制出各种符合个人意愿的圆形来，本文就介绍<circle>如何设置实线边框/虚线边框/无边框。
实线边框
完整HTML代码
<!DOCTYPE html>
<html lang='en' class=''>
<head>
<meta charset='UTF-8'>
<title>Demo</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="40" cy="40" r="24" style="stroke:#006600; fill:#00cc00"/>
</svg>
</body>
</html>
执行结果
execcodegetcode
代码解释
本实例看到，圆形边框主要是通过stroke属性值确定，边框颜色为#006600。
虚线边框
完整HTML代码
<!DOCTYPE html>
<html lang='en' class=''>
<head>
<meta charset='UTF-8'>
<title>Demo</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="40" cy="40" r="24"
style="stroke:#006600;
stroke-width: 3;
stroke-dasharray: 10 5;
fill:#00cc00"/>
</svg>
</body>
</html>
执行结果
execcodegetcode
代码解释
本实例中，边框有3个属性，颜色（#006600）、大小（3）、形状（虚线 stroke-dasharray: 10 5）。
fill是填充颜色。
无边框
<circle>除了可以设置实线边框、虚线边框，还可以禁用边框，即是无边框。
完整HTML代码
<!DOCTYPE html>
<html lang='en' class=''>
<head>
<meta charset='UTF-8'>
<title>Demo</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="40" cy="40" r="24"
style="stroke: none;
fill:#00cc00"/>
</svg>
</body>
</html>
execcodegetcode
执行结果
代码解释
stroke属性值为none，得到的圆就是无边框。
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
