[翻译svg教程]svg中的circle元素

简介: svg中的 元素,是用来绘制圆形的,例如   效果如下 属性说明 cx,cy 设定圆心,r设定半径 圆形的边框 可以通过设置样式设置圆形的边框 例如 属性说明 stroke 边框的颜色 ...

svg中的<circle> 元素,是用来绘制圆形的,例如

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

 

效果如下

image

属性说明 cx,cy 设定圆心,r设定半径

圆形的边框

可以通过设置样式设置圆形的边框

例如

<circle cx="40" cy="40" r="24"
    style="stroke:#006600;
           stroke-width: 3;
           fill:#00cc00"/>
属性说明 stroke             边框的颜色
        stroke-width       边框的宽度
        fill               填充的颜色
效果如下
当然可以通过 stroke-dasharray  属性设置边框为虚线 
AI 代码解读
例如
<circle cx="40" cy="40" r="24"
    style="stroke:#006600;
           stroke-width: 3;
           stroke-dasharray: 10 5;
           fill:#00cc00"/>
效果如下 
也可以禁用边框 例如
<circle cx="40" cy="40" r="24"
    style="stroke: none;
           fill:#00cc00"/>
效果

圆形的填充

style 中的fill 属性用于设置圆形如何填充,如果不想圆形被填充可以把fill设置为none

例如 这是一个不填充的效果

<circle cx="40" cy="40" r="24"
    style="stroke: #00600;
           fill:none"/>

image

这是一个填充颜色的例子

<circle cx="40" cy="40" r="24"
    style="stroke: #660066;
           fill: #00ff00"/>

image

还可以通过fill-opacity来设置透明度

例如两个圆部分重叠在一起

<circle cx="40" cy="40" r="24"
    style="stroke: #660000;
           fill: #cc0000" />
<circle cx="64" cy="40" r="24"
    style="stroke: #000066;
           fill: #0000cc"
           fill-opacity: 0.5/>
imagetest
目录
打赏
0
0
0
0
8
分享
相关文章
Linux的netns使用总结
Linux的netns(Network Namespace)是一项强大的网络隔离功能,可在内核层面创建多个独立的网络空间,每个空间配备独立的网络协议栈,包括接口、路由表及iptables规则等,确保不同应用或服务在网络环境中互不干扰,提升系统安全性和灵活性。通过`ip netns`命令可轻松管理netns,实现创建、删除及执行命令等功能。netns适用于容器技术、虚拟化环境及网络测试等多种场景,为用户提供高效、安全的网络环境管理方案。
694 3
如何在 Java 代码中使用 JSqlParser 解析复杂的 SQL 语句?
大家好,我是 V 哥。JSqlParser 是一个用于解析 SQL 语句的 Java 库,可将 SQL 解析为 Java 对象树,支持多种 SQL 类型(如 `SELECT`、`INSERT` 等)。它适用于 SQL 分析、修改、生成和验证等场景。通过 Maven 或 Gradle 安装后,可以方便地在 Java 代码中使用。
1745 11
阿里巴巴API接口对电商的影响与收益
在全球电子商务快速发展的背景下,阿里巴巴作为领先的B2B平台,为中小企业提供商品批发、分销、供应链管理等一站式服务,并通过开放的API接口为开发者和电商企业提供数据资源与功能支持。本文将深入解析阿里巴巴API接口的功能(如商品搜索、详情、订单和用户管理)、应用(如商品展示、搜索优化、交易管理和用户行为分析)、收益(如流量增长、销售提升、库存优化)及实际案例,附带代码示例,助力电商从业者提升运营效率和用户体验。
265 0
RaspberryPi(树莓派)安装 MariaDB / MySQL 数据库
本文主要为大家讲解如何在RaspberryPi(树莓派)系统上安装 MariaDB / MySQL 数据库。
3607 0
RaspberryPi(树莓派)安装 MariaDB / MySQL 数据库
Intellij idea 代码提示忽略字母大小写和常用快捷键及设置
Intellij idea 代码提示忽略字母大小写和常用快捷键及设置
3625 0
Intellij idea 代码提示忽略字母大小写和常用快捷键及设置
宽带接入网络的形式(软考网工知识点总结)
宽带接入网络的形式(软考网工知识点总结)
670 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问