如何在不使用 SVG 图像的情况下使用带有文本的 React 创建圆形/方形形状？
发布于2021-10-12 09:12 阅读(660) 评论(0) 点赞(24) 收藏(4)
使用 React 创建圆形和方形形状的方法是什么，它们可以在其中包含自定义文本而不使用 SVG 图像？一个例子：
我尝试了以下代码，但它没有呈现任何形状：
import React from 'react';
export default function Circle(){
return(
<div height="110" width="500">
<circle
cx="50"
cy="55"
r="45"
fill="none"
stroke="#F0CE01"
strokeWidth="4"
/>
</div>
);
}
解决方案
您甚至可以使用div标签来做到这一点。只需添加border-radius即可创建一个圆圈。
反应示例：https : //codesandbox.io/s/shapes-qbf1f
这是一个快速概述的片段：
.square {
display: flex;
width: 100px;
height: 100px;
background-color: red;
}
.circle {
display: flex;
width: 100px;
height: 100px;
background-color: green;
border-radius: 50%;
}
.text {
margin: auto;
}<div class="square">
<p class="text">Square text</p>
</div>
<div class="circle">
<p class="text">Circle text</p>
</div>所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/202672/eab3dac77490d4e1254f/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力