【发布时间】：2021-05-08 20:00:30
【问题描述】：
如何制作带有形状变形的圆形 SVG？
我正在尝试用有机运动做圆圈。
但正如您所见，像素似乎有问题。
关于如何使它更好看的任何想法？这甚至是我用来做这件事的正确方式吗？我不是 svg 方面的专家，也不是形状变形方面的专家。
class App extends React.Component {
render() {
return (
<div>
<svg width="200px" height="200px" viewBox="0 0 120 120">
<defs>
<filter id="distort">
<feTurbulence baseFrequency=".02" type="fractalNoise" />
<feColorMatrix type="hueRotate" values="0">
<animate attributeName="values" from="0" to="360" dur="1s" repeatCount="indefinite" />
</feColorMatrix>
<feDisplacementMap in="SourceGraphic" xChannelSelector="R" yChannelSelector="B" scale="20">
<animate attributeName="scale" values={Math.round(Math.random() * 20) + ';' + Math.round(Math.random() * 10) + ';' + Math.round(Math.random() * 10) + ';' + Math.round(Math.random() * 10) + ';'} dur="5s" repeatCount="indefinite" />
</feDisplacementMap>
</filter>
</defs>
<circle filter="url(#distort)" cx="60" cy="60" r="30" />
</svg>
</div>
);
}
}
// Render it
ReactDOM.render(
<App />,
document.getElementById("app")
);svg {
stroke-width: 1;
stroke: #293133;
stroke-linecap: round;
fill: white;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>【问题讨论】：
标签： reactjs animation svg svg-animate