Question

我目前正在开发React应用。我刚刚在Firefox和Microsoft Edge中测试了我的应用程序-可以工作。不幸的是，我的SVG无法在Chrome中呈现。我认为我的SVG一定有问题。

我的SVG配置错误吗？

SVG代码

const updateButton = (
<Link
    to="/summary/registration"
    className="ml-3 series"
    onClick={() => this.setState({summaryVisible: false})}
>
    <svg
        id="gear"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 256 256"
        className="mr-3 series"
        onClick={() => this.setState({summaryVisible: false})}
    >
        <title>gear</title>
        <g className="series">
            <path
                id="gear-path"
                d="M254.84,128a127.83,127.83,0,0,0-1.41-19l-16.21-1
              L252,101.16a125.87,125.87,0,0,0-7.2-22.71
              L228.6,81.57l12.74-10.5
              A126.88,126.88,0,0,0,228.7,50.92l-15,7.11,9.83-13.47a127.59,127.59,0,0,0-17.22-16.34
              L193.35,39l6.23-15.64a126.59,126.59,0,0,0-20.72-11.51l-9.93,13.72,2.16-16.82
              a126,126,0,0,0-22.93-5.91l-6.22,15.8-2.1-16.85
              c-3.9-.36-7.85-.55-11.84-.55
              s-7.94.19-11.84.55l-2.1,16.85-6.22-15.8
              A126,126,0,0,0,84.91,8.71l2.16,16.82L77.14,11.81A126.59,126.59,0,0,0,56.42,23.32
              L62.65,39,49.72,28.22A127.59,127.59,0,0,0,32.5,44.56
              L42.33,58l-15-7.11
              A126.88,126.88,0,0,0,14.65,71.07L27.4,81.57,11.22,78.45
              A125.87,125.87,0,0,0,4,101.16l14.76,6.91-16.21,1a127.83,127.83,0,0,0-1.41,19
              c0,1.64,0,3.26.1,4.88l15.77,3L1.8,140.8a126.24,126.24,0,0,0,4.63,23.49l15.82-1
              L8.89,171.71a126.27,126.27,0,0,0,10.37,21.63l14.87-4.86L23.43,199.82
              a127.47,127.47,0,0,0,15.43,18.43l13-8.3-7.45,13.49
              A127.21,127.21,0,0,0,64,237.53l10.47-11.19L70.6,241.16
              A126,126,0,0,0,93,250l7.32-13.38,0,15.23a127,127,0,0,0,23.93,3L128,240.09l3.75,14.72
              a127,127,0,0,0,23.93-3l0-15.23L163,250a126,126,0,0,0,22.43-8.82l-3.84-14.82L192,237.53
              a127.21,127.21,0,0,0,19.53-14.09L204.11,210l13,8.3
              a127.47,127.47,0,0,0,15.43-18.43l-10.69-11.34,14.87,4.86
              a126.27,126.27,0,0,0,10.37-21.63l-13.37-8.45,15.82,1a126.24,126.24,0,0,0,4.63-23.49
              L239,135.89l15.77-3C254.79,131.29,254.84,129.67,254.84,128ZM128,225.82
              A97.79,97.79,0,1,1,225.79,128,97.79,97.79,0,0,1,128,225.82Z"
                stroke="#fff"
                stroke-miterlimit="10"
            />
        </g>
    </svg>
</Link>
);

const deleteButton = (
    <Link
        to="/summary/registration"
        className="ml-3 series"
        onClick={() => this.setState({summaryVisible: false})}
    >
        <svg id="trashcan" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 190 256">
            <title>gear</title>
            <g className="series">
                <path
                    id="trashcan-path"
                    d="M53,256H203V66.14H53ZM153,93.1h18V229H153Zm-34,0h18V229H119Zm-34,0h18V229H85Z"
                    transform="translate(-33.89)"
                />
                <rect id="trashcan-path" y="38.73" width="190" height="18"/>
                <polygon
                    id="trashcan-path"
                    points="54.11 38.73 66.2 38.73 66.2 18 122.02 18 122.02 38.73 134.11 38.73 134.11 18
                134.11 0
            134.11 0 122.02 0 122.02 0 66.2 0 66.2 0 54.11 0 54.11 0 54.11 0 54.11 18 54.11 18 54.11 38.73"
                />
            </g>
        </svg>
    </Link>
);

Firefox输出-正在运行

Chrome输出-图标丢失

控制台不显示任何错误。

SVG不在Chrome中呈现，而是在Edge和Firefox中呈现（反应）

0 个答案: