作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个 svg 组件:
export const Spinner = ({ color, size }) => (
<svg ref={ref} version="1.0"
width={size} height={size} viewBox="0 0 150.000000 150.000000"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,150.000000) scale(0.100000,-0.100000)"
fill={color} stroke="none">
<path d="M520 1476 c-240 -84 -422 -277 -492 -522 -29 -102 -31 -276 -4 -374
58 -214 197 -384 390 -479 80 -40 187 -71 236 -70 14 0 -2 6 -35 14 -328 71
-556 354 -556 688 0 122 16 191 73 307 33 68 58 102 127 171 73 73 101 93 181
132 52 25 111 48 130 52 72 14 100 53 64 89 -20 21 -35 20 -114 -8z"/>
<path d="M708 23 c12 -2 32 -2 45 0 12 2 2 4 -23 4 -25 0 -35 -2 -22 -4z" />
</g>
</svg>
);
我尝试将其样式设置为旋转,如下所示:
export const StyledSpinner = styled(Spinner)(({ theme }) => ({
animation: 'LoaderSpin infinite 700ms linear',
transformBox:'fill-box',
"@keyframes LoaderSpin": {
from: {
transform: "rotate(0deg)"
},
to: {
transform: "rotate(360deg)"
},
}
}))
但是我失败了。如果我用固定颜色和固定大小保存这个 svg,并设置如下样式:
import Image from 'next/image';
export const SpinningImage = styled(Image)(({ theme }) => ({
animation: 'nfLoaderSpin infinite 700ms linear',
"@keyframes nfLoaderSpin": {
from: {
transform: "rotate(0deg)"
},
to: {
transform: "rotate(360deg)"
},
}
}))
并像这样在 jsx 文件中使用它:
<StyledSpinner
color={theme.palette.secondary.main}
size={300}
/>
它会旋转。我的问题是:如何旋转上面的 SVG 组件?
最佳答案
样式已生成,但您需要将 className
属性传递给您的 svg 组件,以便应用它:
const Spinner = ({ color, size, className /* <---------------------- Add this */ }) => {
return (
<svg className={className} {...} />
);
}
const StyledSpinner = styled(Spinner)(({ theme }) => ({
animation: `nfLoaderSpin infinite 700ms linear`,
transformBox: "fill-box",
"@keyframes nfLoaderSpin": {
from: {
transform: "rotate(0deg)"
},
to: {
transform: "rotate(360deg)"
}
}
}));
关于reactjs - 如何在 MUI v5 中旋转组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69580185/
我是一名优秀的程序员,十分优秀!