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

【问题标题】：Using External Style Sheet in SVG not working in JSX在 SVG 中使用外部样式表在 JSX 中不起作用
【发布时间】：2019-04-17 15:01:34
【问题描述】：

我在 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。也许这就是问题所在？

【问题讨论】：

"如果 SVG 文件包含在 HTML 中，您的 css 文件只会对 SVG 的内容产生影响：" 来自 How to style SVG with external CSS? 也有 “Security restrictions” when linking to external stylesheet from SVG
好的，但这在 JSX 中不起作用。外部样式表在 html 中工作。也适用于 react-svg

标签： reactjs svg

【解决方案1】：

事实证明这是一个 crate react 应用程序的问题。如果在 SVG 中使用相对路径，则对外部工作表的请求将位于静态/媒体目录中。如果外部 css 表的路径是绝对路径，则此方法有效。

【讨论】：