css SVG渐变不工作

fafcakar 于 2023-04-13 发布在其他

关注(0)|答案(4)|浏览(137)

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

谢谢！

css

来源：https://stackoverflow.com/questions/38990880/svg-gradient-not-working

4条答案

按热度按时间

gblwokeq1#

我有一个非常奇怪的错误 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_linear和paint1_linear更改为gradient1和gradient2。
这是一个奇怪的问题，但也许这会帮助一些人。

赞(0）回复(0）举报 2023-04-13

a14dhokn2#

它是大写G的linearGradient
url中的内部引号无效
需要关闭路径

因为你没有提供路径的d属性，我用rect代替了它。

<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 70 70" 
style="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>

<rect width="100%" height="100%" style="fill: url(#grC29M)"/>
</svg>

赞(0）回复(0）举报 2023-04-13

kfgdxczn3#

除了其他答案，在我的例子中，我使用了gradientUnits，如下所示：

<linearGradient id="gradient_default" x1="357" y1="-105" x2="84.811" y2="-20.2733" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#FFCC17"/>
<stop offset="1" stop-color="#FF6410"/>
</linearGradient>

它必须正确地大写（大写“U”），就像你对“linearGradient”大写“G”一样。

赞(0）回复(0）举报 2023-04-13

ruarlubt4#

这是因为在DOM（website）中有多个svg示例，所以每个示例都使用相同的id属性。例如：
id=“grC 29 M”在原始问题中。

<lineargradient id="grC29M" x1="0%" y1="0%" x2="100%" y2="0%">

，id的重复导致了意想不到的行为。我相信这和下面的@cuddlemeister答案起作用的原因是一样的。看起来他改变了其中一个示例的id，因为没有id的重复，svg最终渲染得很好。
在某些情况下，如果svg的第一个示例没有呈现，而是出现在dom中，那么我也可以看到这个问题，但是在悬停或单击时，如果第一个示例呈现，那么甚至svg的第二个示例也呈现

赞(0）回复(0）举报 2023-04-13

我来回答

css SVG渐变不工作

4条答案

相关问题

热门标签

最新问答