Html SVG梯度不工作

我有一个svg，我需要用渐变填充它，css是由脚本添加的，如果你使用单一RGB颜色，所有的工作都会很好，但是使用渐变svg会产生白色背景

脚本后的结果代码：

<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" 
id="Livello_1" x="0px" y="0px" viewBox="0 0 70 70" 
style="enable-background:new 0 0 70 70;width: 50px; height: 50px;" 
xml:space="preserve">
<defs>
  <lineargradient id="grC29M" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" style="stop-color:rgb(88,88,88);stop-opacity:1"></stop>
    <stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:1"></stop>
    </lineargradient>
</defs>

<path class="st0" d="......" style="fill: url("#grC29M")">
</svg>

谢谢

• 它是带大写字母G的直线半径
• url中的内部引号无效
• 这条路需要关闭

因为您没有提供路径的d属性，所以我将其替换为rect

---

当渐变不起作用时，我在chrome中遇到了一个非常奇怪的错误

<svg width="442" height="249" viewBox="0 0 442 249" fill="none" xmlns="http://www.w3.org/2000/svg">
    <mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="442" height="249">
        <path
            d="M225.158 123.903H441.656C401.021 94.5929 319.085 35.7055 316.42 34.6397C313.089 33.3074 151.215 0 148.551 0C146.419 0 71.2778 15.5434 33.9735 23.3152L0 145.886C8.88197 178.75 28.1114 245.275 33.9735 248.473C41.3011 252.47 97.2575 232.485 115.243 230.487C129.632 228.888 194.515 158.765 225.158 123.903Z"
            fill="#C4C4C4" />
    </mask>
    <g mask="url(#mask0)">
        <path
            d="M49.8681 219.88C42.8755 215.861 40.5446 206.754 44.6687 199.578C48.7928 192.403 57.8357 189.833 64.8283 193.852C71.8209 197.871 74.1518 206.978 70.0277 214.154C65.9037 221.329 56.8607 223.899 49.8681 219.88ZM60.0531 202.16C57.5288 200.709 54.2499 201.646 52.7639 204.231C51.2779 206.817 52.1191 210.121 54.6434 211.572C57.1677 213.023 60.4466 212.086 61.9326 209.501C63.4186 206.915 62.5774 203.611 60.0531 202.16Z"
            fill="url(#gradient1)" />
        <path
            d="M127.776 283.054C125.861 281.954 124.95 279.575 125.754 277.371C126.65 274.871 129.337 273.555 131.775 274.416C187.265 293.788 249.429 269.847 279.55 217.441C313.928 157.627 294.543 81.7525 236.31 48.2827C178.077 14.8128 102.787 36.272 68.4251 96.0567C53.5818 121.882 48.2006 152.064 53.2367 181.045C53.6857 183.622 51.9799 186.119 49.4165 186.617C46.8531 187.115 44.4166 185.444 43.9677 182.867C38.5354 151.687 44.3513 119.205 60.33 91.404C97.3008 27.0127 178.413 3.95305 241.085 39.9744C303.758 75.9957 324.662 157.69 287.662 222.065C255.237 278.48 188.329 304.293 128.534 283.413C128.286 283.309 128.037 283.204 127.776 283.054Z"
            fill="url(#gradient2)" />
    </g>
    <defs>
        <linearGradient id="gradient1" x1="157" y1="24.5" x2="157" y2="248.5" gradientUnits="userSpaceOnUse">
            <stop stop-color="#FF8B00" />
            <stop offset="1" stop-color="#FF8B00" stop-opacity="0" />
        </linearGradient>
        <linearGradient id="gradient2" x1="175" y1="22.5" x2="175" y2="238.5" gradientUnits="userSpaceOnUse">
            <stop stop-color="#FF8B00" />
            <stop offset="1" stop-color="#FF8B00" stop-opacity="0" />
        </linearGradient>
    </defs>
</svg>

直到我将ID从

paint0\u linear

和

paint1\u linear

更改为

gradient1

和

gradient2

---

这是一个很奇怪的问题，但也许这会对某些人有所帮助

我认为这只是你需要将

style=“fill:url（“#grC29M”）”>

改为

style=“fill:url（“#grC29M”）”/>

（不同的引号和结束斜杠）。@MaxStarkenburg实际上你根本不需要内部引号，谢谢你的回答，SVG是由多个路径组成的，如果你愿意的话，我可以在答案中插入它，但我认为渐变是独立于路径结构工作的。相反，在我的jquery代码中，我编写了linearGradient，但在chrome developer工具中都是小写。。。为什么会有这种行为？最终的解决方案是避免jQuery，并使用php设置所有服务器端。如果有人必须使用javascript或jQuery，而且没有其他选择，我建议发表这篇文章。感谢@Robert Longson编辑答案并提供帮助。