Question

我正在React应用程序中加载SVG。 SVG引用了外部样式表。

如果我将SVG从JSX中移出并移至index.html，则SVG使用已定义的css类。

如果我使用诸如react-svg之类的库，则该svg正在JSX中加载外部CSS类。

在JSX中使用SVG时，为什么SVG无法加载外部CSS？

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import ReactSVG from 'react-svg'
    class App extends Component {
      render() {
        return (
          <object data={logo} className="App-logo" type="image/svg+xml"></object> 
        );
      }
    }

    export default App;




<?xml-stylesheet type="text/css" href="./App.css" ?>
    <svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
        <g class='svgTestFill'>
            <path  d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 ..."/>
            <circle  cx="420.9" cy="296.5" r="45.7"/>
            <path   d="M520.5 78.1z"/>
        </g>
    </svg>

这将使徽标以红色填充。我也不想使用SVG内联。我必须将SVG导入为对象。

检查网络请求后，我在SVG中引用的CSS文件从create-react应用程序返回为HTML页面，而不是CSS页面。也许这是问题所在？

Answer 1

事实证明这是一个板条箱反应应用程序存在的问题。如果在SVG中使用相对路径，则对外部工作表的请求将在static / media目录中。如果到外部css工作表的路径是绝对路径，则可以使用。

在SVG中使用外部样式表在JSX中不起作用

1 个答案: