使用SVG画出空心的圆圈
时间: 2023-07-11 09:53:45 浏览: 53
以下是使用 SVG 代码画出一个空心的圆圈的示例:
```html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" stroke="#000" stroke-width="2" fill="none" />
</svg>
```
解释:
1. `<svg>`:定义一个 SVG 画布;
2. `viewBox`:定义画布的宽高比例和显示区域;
3. `<circle>`:绘制一个空心圆形;
4. `cx`、`cy`、`r`:圆心坐标和半径;
5. `stroke`:边框颜色;
6. `stroke-width`:边框宽度;
7. `fill`:填充颜色。
效果如下:
![空心圆圈](https://cdn.jsdelivr.net/gh/suifengqjn/cdn/img/svg_circle.svg)
相关问题
使用SVG画出QQ浏览器logo
以下是使用 SVG 代码画出 QQ 浏览器 logo 的示例:
```html
<svg viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg">
<circle cx="120" cy="120" r="110" fill="#1c95e6" />
<rect x="80" y="20" width="80" height="200" rx="40" fill="#fff" />
<path d="M 80 120 A 40 40 0 0 1 120 80 L 120 120 Z" fill="#1c95e6" />
<path d="M 160 120 A 40 40 0 0 1 120 160 L 120 120 Z" fill="#1c95e6" />
<rect x="80" y="100" width="80" height="40" fill="#1c95e6" />
<rect x="100" y="80" width="40" height="80" fill="#1c95e6" />
</svg>
```
解释:
1. `<svg>`:定义一个 SVG 画布;
2. `viewBox`:定义画布的宽高比例和显示区域;
3. `<circle>`:绘制一个圆形,作为背景;
4. `<rect>`:绘制一个矩形,作为主要的图形;
5. `<path>`:绘制两个半圆,作为两个小图形的背景;
6. `fill`:填充颜色。
效果如下:
![QQ浏览器logo](https://cdn.jsdelivr.net/gh/suifengqjn/cdn/img/qq_browser_logo.svg)
使用svg画两个小空心圆圈从上而下用一条线连接
好的,以下是使用SVG画两个小空心圆圈从上而下用一条线连接的代码:
```html
<svg width="100" height="100">
<circle cx="50" cy="25" r="10" fill="none" stroke="blue" stroke-width="2" />
<circle cx="50" cy="75" r="10" fill="none" stroke="red" stroke-width="2" />
<line x1="50" y1="25" x2="50" y2="75" stroke="black" stroke-width="2" />
</svg>
```
这个代码会在SVG区域内画一个蓝色空心圆圈和一个红色空心圆圈,分别位于SVG区域的上方和下方中心位置。圆圈的半径为10,填充颜色为none,边框颜色为蓝色和红色,边框宽度为2。两个圆圈之间使用一条黑色线连接,线的宽度为2。你可以根据需要修改圆圈的颜色、大小和位置,也可以修改线的颜色和宽度。