Question

我有一个要在React.js应用程序中呈现的svg。我的工作代码如下所示

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>
      )
   }
}

但是，当我尝试从this文件渲染svg时，则不会加载任何内容。我已经将stroke-width设置为strokeWidth，将xmlns:xlink设置为xmlnsXlink的情况是骆驼，但是在this stackoverflow答案之后仍然没有运气。

我想念什么吗？

无效的代码：

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

您正在按百分比定义svg元素的高度和宽度。当我测试您的代码时，它将呈现一个150像素高的元素。您的<path>的{{1}}坐标都在300到400像素之间。

SVG元素太短而无法显示内容。

如果我更改

到

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

…然后我可以看到您的<svg width="100%" height="500"。

在React.js中渲染SVG

1 个答案: