ajax 动态加载svg 不显示

可能有几种原因导致 SVG 图片无法显示：

1. SVG 文件路径错误。请确保文件路径正确，且能够正确加载 SVG 文件。

2. SVG 文件本身存在问题。你可以通过在浏览器中打开 SVG 文件来检查是否存在问题。

3. 服务器配置问题。如果你使用的是服务器，可能会存在一些配置问题。尝试使用其他服务器或者本地文件来测试是否存在问题。

4. JavaScript 代码问题。检查一下代码逻辑是否正确，是否有错误。

5. CSS 样式问题。有时候 SVG 图片无法显示是因为 CSS 样式覆盖了 SVG 图片，你可以尝试将样式去掉或者给 SVG 图片添加样式来解决问题。

以上是一些可能导致 SVG 图片无法显示的原因，你可以尝试排查问题并解决。

相关问题

ajax请求svg加载到img标签

可以通过以下步骤将SVG加载到img标签中：

1. 创建一个 XMLHttpRequest 对象。
2. 使用 open() 方法打开与 SVG 文件的连接。
3. 使用 responseType 属性将响应类型设置为 text。
4. 使用 send() 方法发送请求。
5. 在 onload 回调函数中，使用 DOMParser 将响应文本解析为 XML 文档对象。
6. 使用 XMLSerializer 将 SVG 文档对象转换为字符串。
7. 设置 img 标签的 src 属性为 SVG 字符串。

以下是代码示例：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'example.svg', true);
xhr.responseType = 'text';

xhr.onload = function() {
  if (xhr.status === 200) {
    var parser = new DOMParser();
    var svgDoc = parser.parseFromString(xhr.responseText, 'image/svg+xml');
    var serializer = new XMLSerializer();
    var svgString = serializer.serializeToString(svgDoc.documentElement);
    
    var img = document.createElement('img');
    img.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svgString);
    document.body.appendChild(img);
  }
};

xhr.send();

注意，由于 SVG 是一种 XML 文件格式，因此需要使用 DOMParser 和 XMLSerializer 对象进行解析和转换。此外，还需要将 SVG 字符串编码为 URI 字符串，并将其设置为 img 标签的 src 属性值。

index.js如何引用并显示svg

要在index.js文件中引用和显示SVG图像，你可以使用React中的<img>标签或者使用React SVG库。以下是两种方法的示例代码：

1. 使用<img>标签

import React from 'react';
import logo from './logo.svg';

function App() {
  return (
    <div>
      <img src={logo} alt="logo" />
    </div>
  );
}

export default App;

在这个例子中，我们首先导入了SVG文件，然后在<img>标签中使用它。请确保SVG文件位于public文件夹中，这样它才能正确地被加载。

2. 使用React SVG库

React SVG库是一个用于在React应用程序中呈现SVG图像的轻量级库。要使用它，你需要安装它并导入它。

首先，使用npm或yarn安装React SVG库：

npm install react-svg

或

yarn add react-svg

然后，在index.js文件中，你可以这样使用React SVG库：

import React from 'react';
import { ReactSVG } from 'react-svg';
import logo from './logo.svg';

function App() {
  return (
    <div>
      <ReactSVG src={logo} />
    </div>
  );
}

export default App;

在这个例子中，我们首先导入了React SVG库和SVG文件，然后使用<ReactSVG>组件来呈现SVG。请注意，这里我们使用的是src属性，而不是img标签中的src属性。这是因为React SVG库使用ajax请求来加载SVG文件。

希望这些代码能帮助你在React应用程序中显示SVG图像！