分享
三行代码  ›  专栏  ›  技术社区  ›  Yerlan Yeszhanov

数据结构,在阵列中存储SVG - data structure ,storing svg in array

  •  0
  • Yerlan Yeszhanov  · 技术社区  · 3 月前

    在数组中存储SVG路径和所有属性的最佳方法是什么?我想存储在数组中,然后映射到渲染。我不需要SVG标签,因为我使用的是样式化组件。

    <svg width="8" height="11" viewBox="0 0 8 11">
                <path d="M1 4.04L4.04 1L7.08 4.04" stroke="#BACCD8" />
                <path d="M7.08008 6.46L4.04008 9.5L1.00008 6.46" stroke="#BACCD8" />
              </svg>
    
    <svg width="8" height="7" viewBox="0 0 8 7">
                <path d="M1 4.04L4.04 1L7.08 4.04" stroke="#177FF2" />
                <path d="M4 4V7" stroke="#177FF2" />
              </svg>
    
    <svg width="8" height="5" viewBox="0 0 8 5">
                <path d="M1 4.04L4.04 1L7.08 4.04" stroke="#177FF2" />
              </svg>
    

    我需要这样做:

    const arrayOfSvg=[
      {
        path: `d="M1 4.04L4.04 1L7.08 4.04" stroke="#BACCD8"`,
        path: `d="M7.08008 6.46L4.04008 9.5L1.00008 6.46"`
      },
      {
        path: `d="M1 4.04L4.04 1L7.08 4.04" stroke="#177FF2"`,
        path: `d="M4 4V7" stroke="#177FF2"`
      },
      {
        path: `d="M1 4.04L4.04 1L7.08 4.04"` 
      }
    ]
    

    但是,我应该如何为每个SVG添加其他属性,如笔画、宽度、高度,以便使用地图进行渲染?

    0 回复  |  直到 3 月前
        1
  •  1
  •   Rahul Mehra    3 月前

    你可以这样做:

    import React from "react";
    import ReactDOM from "react-dom";
    
    import img1 from "./yourpath/img1.svg";
    import img2 from "./yourpath/img2.svg";
    import img3 from "./yourpath/img3.svg";
    
    const imgArray = [img1, img2, img3];
    
    function Home() {
      return (
        <div className="Home">
          <img src={imgArray[0]} alt="some alt" />
        </div>
      );
    }
    
    const rootElement = document.getElementById("root");
    ReactDOM.render(<Home />, rootElement);