Question

在数组中存储svg路径和所有属性的最佳方法是什么？我想存储在数组中，然后将其映射为渲染。我不需要svg标记，因为我使用的是样式化的组件。

btn.addEventListener('click', function(){
    socket.emit('chat', {   
        message: message.value,
        kullanıcıadı: kullanıcıadı.value
    });

我需要做这样的事情：

<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>

但是我应该如何为每个svg添加其他属性，例如笔触，宽度，高度，以使其更易于使用地图进行渲染？

Answer 1

您可以这样：

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

数据结构，将svg存储在数组中

1 个答案: