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

【问题标题】：Dynamically draw/turn SVG with variable input使用可变输入动态绘制/旋转 SVG
【发布时间】：2021-01-29 12:15:31
【问题描述】：

我想根据我收到的度数参数使用 React 动态绘制/旋转 SVG。它就像来自天气信息的方向箭头。

如何在 Javascript / ReactJS 中动态绘制 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 路径相互连接？

【问题讨论】：

标签： javascript reactjs svg

【解决方案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 属性，以根据您使用 template literals 收到的 API 数据旋转一定度数。

使用基于this answer的javascript旋转。

Sandbox Example

【讨论】：

非常感谢。我将您的 useEffect 的内容设置为我的 API-Call useEffect .. 不过是一个问题。你怎么知道 SVG 需要什么路径数据？
在这个例子中，我使用了一个图形设计工具来创建 svg。我用figma。它允许您使用钢笔工具或通过将更多原始形状组合成一个来创建形状。如果您创建了图形，figma 允许您右键单击并复制为 svg。您还可以找到文档 here，了解 svg 路径的一般工作原理。所以你也可以手动创建路径，但是你想要创建的大多数形状都相当复杂，所以我建议大多数时候使用第一种方法。