SVG-更改填充的颜色

Question

我在https://eldritchpowr.com/处有一个着陆页，我正在尝试更改其颜色。

我正在尝试将英雄部分的黑色部分变成白色。

由于某些原因，SVG不会改变颜色！

import React, { Component, Fragment } from "react";
import Link from 'next/link'

const background = {
    backgroundImage: `url("data:image/svg+xml,%3Csvg className='absolute bottom-0 overflow-hidden' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' version='1.1' viewBox='0 0 100 100' x='0' y='0' %3E%3Cpolygon className='text-gray-300 fill-current' points='0,100 100,0 100,100' %3E%3C/polygon%3E%3C/svg%3E")`
};


class Hero extends Component {
    render() {
        return (


            <div className="relative bg-white overflow-hidden">

                <div style={background} className=" bg-white relative pt-6 pb-16 md:pb-20 lg:pb-24 xl:pb-32  ">


                    {/* <!--
      Mobile menu, show/hide based on menu open state.

      Entering: "duration-150 ease-out"
        From: "opacity-0 scale-95"
        To: "opacity-100 scale-100"
      Leaving: "duration-100 ease-in"
        From: "opacity-100 scale-100"
        To: "opacity-0 scale-95"
    --> */}

                    <div className="transparent mt-8 mx-auto max-w-screen-xl px-4 sm:mt-12 sm:px-6 md:mt-20 xl:mt-24">

                        <div className="lg:grid lg:grid-cols-12 lg:gap-8 z-30">

                            <div className="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left">

                                <h2 className="mt-1 text-4xl tracking-tight leading-10 font-extrabold text-white sm:leading-none sm:text-6xl lg:text-5xl xl:text-6xl">
                                    The best data analytics experience
            <br className="hidden md:inline" />
                                    <span className="text-indigo-600"> ever made. </span>
                                </h2>

                                <div className="mt-5 sm:max-w-lg sm:mx-auto sm:text-center lg:text-left lg:mx-0">
                                    <p className="text-base font-medium text-white">
                                        And it's human friendly.            </p>
                                    <form action="#" method="POST" className="mt-3 sm:flex">
                                        <input aria-label="Email" className="appearance-none block w-full px-3 py-3 border border-gray-300 text-base leading-6 rounded-md placeholder-gray-500 shadow-sm focus:outline-none focus:placeholder-gray-400 focus:shadow-outline focus:border-blue-300 transition duration-150 ease-in-out sm:flex-1" placeholder="ENTER EMAIL" />
                                        <button type="submit" className="mt-3 w-full px-6 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-gray-800 shadow-sm hover:bg-gray-700 focus:outline-none focus:shadow-outline active:bg-gray-900 transition duration-150 ease-in-out sm:mt-0 sm:ml-3 sm:flex-shrink-0 sm:inline-flex sm:items-center sm:w-auto">
                                            REQUEST ACCESS
              </button>
                                    </form>
                                </div>
                            </div>
                            {/* <div
                        className="z-0 0top-auto bottom-0 left-0 right-0 w-full absolute pointer-events-none overflow-hidden"
                        style={{ height: '100vw', transform: "translateZ(0)" }}
                    >
                        <svg
                            className="absolute bottom-0 overflow-hidden"
                            xmlns="http://www.w3.org/2000/svg"
                            preserveAspectRatio="none"
                            version="1.1"
                            viewBox="0 0 100 100"
                            x="0"
                            y="0"
                        >
                            <polygon
                                className="text-gray-300 fill-current"
                                points="0,100 100,0 100,100"
                            ></polygon>
                        </svg>
                    </div> */}
                            <div className="mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-6 lg:flex lg:items-center">
                                <div className="relative mx-auto w-full rounded-lg shadow-lg lg:max-w-md">

                                    <img className="w-full" src="static/dashboard_prop_viz.png" alt="Data Analytics" />
                                    {/* <button className="relative block w-full rounded-lg overflow-hidden focus:outline-none focus:shadow-outline">

                                        <div className="absolute inset-0 w-full h-full flex items-center justify-center">
                                            <svg className="h-20 w-20 text-indigo-500" fill="currentColor" viewBox="0 0 84 84">
                                                <circle opacity="0.9" cx="42" cy="42" r="42" fill="white" />
                                                <path d="M55.5039 40.3359L37.1094 28.0729C35.7803 27.1869 34 28.1396 34 29.737V54.263C34 55.8604 35.7803 56.8131 37.1094 55.9271L55.5038 43.6641C56.6913 42.8725 56.6913 41.1275 55.5039 40.3359Z" />
                                            </svg>
                                        </div>
                                    </button> */}
                                </div>
                            </div>

                        </div>

                    </div>

                </div>
            </div>

        )
    }
}
export default Hero;

关于将颜色更改为白色的任何线索吗？我尝试更改svg样式标签的每个部分，但尚未成功。

谢谢！

谢谢！