svg circle stroke属性设置实线边框/虚线边框/无边框

技术频道 - html技术

svg circle stroke属性设置实线边框/虚线边框/无边框

作者:admin 时间:2021-7-23 23:1:59 浏览:

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>

执行结果

execcode getcode

代码解释

本实例看到，圆形边框主要是通过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>

执行结果

execcode getcode

代码解释

本实例中，边框有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>