如何在兩個元素之間的ReactJs中進行svg變形

我目前有兩個定義 svg 元素的變數。我在兩者之間變形時遇到了麻煩，我嘗試了 react-svg-morph 但每次渲染時圓圈都會消失。渲染變形的最佳方式是什么？

這是我的設定：

    let hexagonShape = <svg width="100%" height="100%" viewBox="0 0 15 15" fill="green" xmlns="http://www.w3.org/2000/svg">
                            <path d="M1.5 4.5V10.5L7.5 14L13.5 10.5V4.5L7.5 1L1.5 4.5Z" stroke="green" strokeWidth=".6" />
                        </svg>
    let circleShape = <svg height="100%" width="100%" viewBox="0 0 15 15" fill='blue' xmlns="http://www.w3.org/2000/svg">
                            <circle cy="50%" cx="50%" r="49%" stroke="blue" strokeWidth=".3" />
                        </svg>

    const [updatedSvg, setUpdatedSvg] = useState(0)
    const [updatedCircleSvg, setUpdatedCircleSvg] = useState()
    const [updatedHexagonSvg, setUpdatedHexagonSvg] = useState()


    function changeSvg() {

        if (updatedSvg === 0) {
            setUpdatedCircleSvg(true)
            setUpdatedHexagonSvg(false)
        }
        if (updatedSvg === 1) {
            setUpdatedCircleSvg(false)
            setUpdatedHexagonSvg(true)
        }
    }

    useEffect(() => {
        changeSvg()
    }, [updatedSvg]) 

我有兩個簡單的按鈕可以在兩個 svg 渲染之間切換：

        <div className={classes.container}>
            <div className={classes.shape}>
            {/* this is where the svgs are being rendered */}
                {updatedCircleSvg && circleShape }
                {updatedHexagonSvg && hexagonShape}
            </div>
            <button onClick={() => setUpdatedSvg(0)}>circle</button>
            <button onClick={() => setUpdatedSvg(1)}>hexagon</button>
        </div>

一點方向會有很大幫助。謝謝

uj5u.com熱心網友回復：

這是一個使用二次貝塞爾曲線的簡單示例：

const getPoints = radius => {
  const factor = Math.sqrt(3);
  return [
    {x: 0, y: -radius},
    {x: radius / factor, y: -radius},
    {x: radius * factor / 2, y: -radius / 2},
    {x: radius * 2 / factor, y: 0},
    {x: radius * factor / 2, y: radius / 2},
    {x: radius / factor, y: radius},
    {x: 0, y: radius},
    {x: -radius / factor, y: radius},
    {x: -radius * factor / 2, y: radius / 2},
    {x: -radius * 2 / factor, y: 0},
    {x: -radius * factor / 2, y: -radius / 2},              
    {x: -radius / factor, y: -radius}
  ];
}


const getRoundPath = radius => {
  const p = getPoints(radius);
  return `M ${p[0].x},${p[0].y} 
    Q ${p[1].x},${p[1].y} ${p[2].x},${p[2].y} 
    Q ${p[3].x},${p[3].y} ${p[4].x},${p[4].y} 
    Q ${p[5].x},${p[5].y} ${p[6].x},${p[6].y} 
    Q ${p[7].x},${p[7].y} ${p[8].x},${p[8].y} 
    Q ${p[9].x},${p[9].y} ${p[10].x},${p[10].y} 
    Q ${p[11].x},${p[11].y} ${p[0].x},${p[0].y}`
};

const getHexagonPath = radius => {
  const p = getPoints(radius);
  for (let index = 1; index < 12; index  = 2) {
    const prev = p[index - 1];
    const next = p[(index   1) % 12];
    p[index].x = (prev.x   next.x) / 2;
    p[index].y = (prev.y   next.y) / 2;
  }
  return `M ${p[0].x},${p[0].y} 
    Q ${p[1].x},${p[1].y} ${p[2].x},${p[2].y} 
    Q ${p[3].x},${p[3].y} ${p[4].x},${p[4].y} 
    Q ${p[5].x},${p[5].y} ${p[6].x},${p[6].y} 
    Q ${p[7].x},${p[7].y} ${p[8].x},${p[8].y} 
    Q ${p[9].x},${p[9].y} ${p[10].x},${p[10].y} 
    Q ${p[11].x},${p[11].y} ${p[0].x},${p[0].y}`
}

const morphPath = (toHex) => {
  const path = toHex ? getHexagonPath(80) : getRoundPath(80);
  d3.select('path')
    .transition()
    .duration(750)
    .attr('d', path);
  setTimeout(() => morphPath(!toHex), 1000);
};

d3.select('path').attr('d', getRoundPath(80))

morphPath(true);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="200" height="200">
  <g transform="translate(100,100)">     
    <path />
  </g>
</svg>

標籤：javascript 反应 svg 反应钩子 jsx

上一篇：如何向下svg元素？

下一篇：如何旋轉Material-Ui選擇自定義圖示，它不變形，不可點擊