在React.js中渲染SVG

Question

I have an svg that I am trying to render in a React.js application. My working code looks like following

import React from 'react';

export default class App extends React.Component{
   render(){
      return(
         <svg
            width="100%"
            height="100%"
            xmlns="http://www.w3.org/2000/svg"
            xmlnsXlink="http://www.w3.org/1999/xlink"
         >
            <defs>
                <g id="Port">
                    <circle style={{ fill: "inherit" }} r="10" />
                </g>
            </defs>
            <use x="10" y="10" xlinkHref="#Port" style={{ fill: "blue" }} />
         </svg>
      )
   }
}

However, when I try to render svg from this file then nothing loads. I have camel cased stroke-width to strokeWidth and xmlns:xlink to xmlnsXlink but still no luck following this stackoverflow answer.

Am I missing something?

The code that doesn't work:

import React, { Component } from "react";

class App extends Component {
    render() {
        return (
            <svg
                width="100%"
                height="100%"
                xmlns="http://www.w3.org/2000/svg"
                xmlnsXlink="http://www.w3.org/1999/xlink"
            >
                <defs>
                    <g id="Port">
                        <path
                            fill="#CEE3F5"
                            stroke="#6E6E6E"
                            strokeWidth="0.4"
                            id="UG"
                            d="M489.1,343.2 L488.2,343.5 L487.4,342.8 L488.5,342.7 Z M496.1,338.9 L496.5,337.7 L497.6,337.7 L497.3,339.5 Z M484.6,348.5 L484.6,348.4 L484.7,348.5 Z M466.2,344.1 L468.4,341.3 L466.6,340.9 L468.7,335.9 L468.7,333.5 L473.3,329.8 L474.1,331.5 L477.2,327.4 L481.0,324.5 L480.0,322.0 L475.3,319.5 L476.5,315.9 L475.6,314.7 L476.4,310.9 L478.9,308.4 L482.0,309.5 L484.3,308.2 L487.7,310.7 L489.3,308.9 L494.8,307.7 L499.1,308.6 L502.9,304.9 L504.5,308.6 L506.8,309.5 L506.3,311.8 L507.9,315.6 L510.8,319.5 L511.2,326.2 L509.7,329.9 L507.2,331.0 L502.9,338.2 L499.3,338.7 L496.8,337.0 L494.6,339.2 L491.1,339.0 L485.4,341.3 L486.2,342.7 L483.5,346.8 L484.2,348.5 L476.2,348.5 L473.2,349.0 L468.4,352.4 L465.7,351.7 L465.5,347.8 Z"
                        >
                            <desc xmlns="http://www.highcharts.com/svg/namespace">
                                <name>Uganda</name>
                                <labelrank>3</labelrank>
                                <country-abbrev>Uga.</country-abbrev>
                                <subregion>Eastern Africa</subregion>
                                <region-wb>Sub-Saharan Africa</region-wb>
                                <iso-a3>UGA</iso-a3>
                                <iso-a2>UG</iso-a2>
                                <woe-id>23424974</woe-id>
                                <continent>Africa</continent>
                                <hc-middle-x>0.59</hc-middle-x>
                                <hc-middle-y>0.45</hc-middle-y>
                                <hc-key>ug</hc-key>
                                <hc-a2>UG</hc-a2>
                            </desc>
                        </path>
                    </g>
                </defs>
                <use x="10" y="10" xlinkHref="#Port" style={{ fill: "blue" }} />
            </svg>
        );
    }
}

export default App;

Answer 1

You are defining the height and width of the svg element in percentages. When I test your code it renders an element that is 150 pixels tall. Your <path> 's y coordinates are all between 300 and 400 pixels.

The SVG element is simply too short to show the content.

If I change

  <svg width="100%" height="100%" 

to

        <svg
            width="100%"
            height="500"

… then I can see your <path> .