如果我更新一个 svg 类型的文件，那么如何从中获取 svg 字符串？

Question

从任何文件上传中选择 SVG 图标后，我需要这种格式的数据。

<svg
  width="100%"
  height="100%"
  viewBox="0 0 24 24"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    fill-rule="evenodd"
    clip-rule="evenodd"
    d="M5 21C3.89543 21 3 20.1046 3 19V5C3 3.89543 3.89543 3 5 3H19C20.1046 3 21 3.89543 21 5V19C21 20.1046 20.1046 21 19 21H5ZM6 18V6H18V18H15V9H12V18H6Z"
    fill="currentColor"
  />
</svg>

请借助这个网站：https://jakearchibald.github.io/svgomg/

在这里我们可以上传任何 SVG，在标记部分下，我们可以看到它的 HTML 版本。

我也想实现类似的东西。

Answer 1

var stringData = document.getElementById('my-svg').outerHTML;

Answer 2

解决了：

      const reader = new FileReader();
      reader.onload = function (evt) {
        console.log("onload: ", evt.target.result);
      };
      reader.readAsText(file);

Answer 3

使用file.text()

// Simulate a file u would get from a file input.
const file = new File(['<svg>content</svg>'], 'ico.svg')

// Read the content
file.text().then(svgText => {
  console.log(svgText)
})

如果我更新一个 svg 类型的文件，那么如何从中获取 svg 字符串？

If I update a file of type svg then how can I get the svg string out of it?

javascript

reactjs

file-upload

image-upload