svg-圆形circle& 椭圆ellipse

最新推荐文章于 2024-04-12 16:19:09 发布

一个程序

最新推荐文章于 2024-04-12 16:19:09 发布

阅读量217

点赞数

分类专栏： svg 文章标签： css html css3

本文链接：https://blog.csdn.net/jibuyueqian/article/details/126733356

版权

svg 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了SVG中的圆形和椭圆的创建方法，包括cx、cy、r、rx和ry等属性定义，以及如何通过CSS设置fill、stroke-width和stroke等样式属性来控制图形的颜色和边框。同时，提到了fill-opacity和stroke-opacity用于调整透明度，以及opacity全局透明度设置。

摘要由CSDN通过智能技术生成

SVG中的圆形

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red"/>
</svg>

圆形属性

cx和cy属性定义圆点的x和y坐标。如果省略cx和cy，圆的中心会被设置为(0, 0)
r属性定义圆的半径

SVG椭圆

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <ellipse cx="300" cy="80" rx="100" ry="50"
  style="fill:yellow;stroke:purple;stroke-width:2"/>
</svg>

椭圆属性

CX属性定义的椭圆中心的x坐标
CY属性定义的椭圆中心的y坐标
RX属性定义的水平半径
RY属性定义的垂直半径

css属性

style 属性用来定义 CSS 属性
css中
  fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
  stroke-width 属性定义矩形边框的宽度
  stroke 属性定义矩形边框的颜色
  fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
  stroke-opacity 属性定义轮廓颜色的透明度（合法的范围是：0 - 1）
  opacity 属性用于定义了元素的透明值 (范围: 0 到 1)。