javascript - 使用可变输入动态绘制/旋转 SVG

Question

我想从我收到的度数参数中动态地绘制/转动一个带有 React 的 SVG。它就像来自天气信息的方向箭头。

1. 如何在 Javascript / ReactJS 中动态绘制 SVG？
2. 如何使用可变输入转动 SVG？

我知道，您可以像这样绘制 SVG-Graphics：

function draw_square() {
    var draw = SVG('square_1');
    draw.size(120, 120);
    var square = draw.rect(100, 100);
    square.attr({ fill: '#f06' });
}
 
draw_square()

但是如何将不同的 svg 路径相互连接？

标签： javascriptreactjssvg

Answer 1

我推荐一种稍微不同的方法：

const WindDirectionIcon = ({ width, height }) => {
  return (
    <svg
      id="wind-direction-arrow"
      width={width}
      height={height}
      viewBox="0 0 12 12"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path d="M6 0L0 12L6 9L12 12L6 0Z" fill="black" />
    </svg>
  );
};

export default function App() {
  useEffect(() => {
    const degrees = 90; // Retrieve from your API
    const arrow = document.getElementById("wind-direction-arrow");
    arrow.setAttribute("transform", `rotate(${degrees})`);
  }, []);

  return (
    <div className="App">
      <WindDirectionIcon width="24" height="24" />
    </div>
  );
}

因此 svg 本身可以由单个路径组成，我们对 javascript 所做的唯一事情就是根据您使用模板文字transform收到的 API 数据将属性设置为旋转一定度数。

根据这个答案使用 javascript 旋转。

沙盒示例