如何向 React 应用程序添加简单的 SVG 路径

Question

I'm trying to get a simple SVG graphic in my react app. But nothing is visible.

I created the graphic in Inkscape and got rid of (what I assumed was garbage ) extra code. Any help would be appreciated I'm a noob with SVGs

const test = () => {
    return (
        <svg viewBox="0 0 210 297">
            <path
                className="polymorph"
                d="m 0.22287672,94.082764 c 0,0 17.63282128,-34.831303 110.42670328,-36.348656 63.66595,-1.041057 101.55017,-59.333835 101.55017,-59.333835 L 211.66521,298.51041 H 0.75741577 Z"
            />
        </svg>
    );
};

I got it working. Apparently my problem was importing in camelCase instead of PascalCase.

import testSVG from '../src/components/test';

function App() {
    return <testSVG />;
}

import TestSVG from '../src/components/test';

function App() {
    return <TestSVG />;
}

Screenshot of Chrome Browser not working Screenshot of working SVG

Answer 1

Your rendred element is,

<testsvg></testsvg>

it means youu have added your component like this,

<testsvg />

When you add element using lowercase name, React thinks it is simple HTML tag and not a React component.

Probably the issue with your Component name.

const test = () => {

You should use PascalCase name for your component, so your component should look like,

const Test = () => {   //Notice PacsalCase name
    return (
        <svg viewBox="0 0 210 297">
            <path
                className="polymorph"
                d="m 0.22287672,94.082764 c 0,0 17.63282128,-34.831303 110.42670328,-36.348656 63.66595,-1.041057 101.55017,-59.333835 101.55017,-59.333835 L 211.66521,298.51041 H 0.75741577 Z"
            />
        </svg>
    );
};

export default Test

Then you should import your component like this,

import Test from './Test'   //write correct filename

And finally usage,

<Test />

Demo

Answer 2

Using your SVG code, I can verify the SVG works. Could it be related to the surrounding influences? Perhaps the parent HTML element has a fixed height / width and cannot show it?

You can investigate this for yourself by inspecting the DOM (Document Object Model) and going of the following checklist (You can use ctrl+f to find things easily here):

• Is the element visible in the DOM eg in the html code -> React issue
• Does it have the correct CSS attributes (height, width, transparancy) -> CSS issue
• Could it be that another item is being drawn over it? -> CSS/HTML issue

If you're not sure about these things, post some more relevant code so we can help out more.