html - SVG渐变不起作用

Question

我有一个 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>

谢谢!

Answer 1

当这个渐变不起作用时，我在 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>

直到我将 ids 从 paint0_linear 和 paint1_linear 更改为 gradient1 和 gradient2 。

相当奇怪的问题，但也许这会帮助某人