在不使用 SVG 图像的情况下,使用 React 可以在其中包含自定义文本来创建圆形和方形的方法是什么? 一个例子:
我尝试了以下代码,但它没有呈现任何形状:
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
即可创建一个圆。
react 示例: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>
关于javascript - 如何在不使用 SVG 图像的情况下使用带有文本的 React 创建圆形/方形?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64884309/