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

我想动态地绘制/转换一个SVG，其中包含我接收到的React from degree参数。它就像天气信息中的方向箭头

如何在Javascript/JS中动态绘制SVG

如何使用可变输入打开SVG

我知道，您可以这样绘制SVG图形：

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路径相互连接呢？

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

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>
  );
}

const WindDirectionIcon=（{width，height}）=>{
返回(
);
};
导出默认函数App（）{
useffect（（）=>{
const degrees=90；//从API中检索
常量箭头=document.getElementById（“风向箭头”）；
setAttribute（“transform”、`rotate（${degrees}）`）；
}, []);
返回(
);
}

因此svg本身可以由一条路径组成，我们使用javascript所做的唯一一件事就是设置

transform

属性，根据您使用的API数据旋转一定数量的角度

使用基于的javascript进行旋转

---

非常感谢。我将useEffect的内容设置为我的API调用useEffect。。不过有一个问题。您是如何知道SVG需要哪些路径数据的？在本例中，我使用了一个图形设计工具来创建SVG。我用过。它允许您使用钢笔工具或将更多灵长类形状组合成一个来创建形状。如果您已经创建了图形，figma允许您右键单击并复制为svg。您还可以找到关于svg路径通常如何工作的文档。因此，您也可以手动创建路径，但是您想要创建的大多数形状都相当复杂，因此我建议大多数情况下使用第一种方法。