SVG渐变不起作用。

Question

SVG渐变不起作用。

5

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

谢谢！

- MarBer

我认为你只需要将style="fill: url("#grC29M")">改为style="fill: url('#grC29M')"/>（区别在于引号和闭合斜杠）即可。 - Max Starkenburg

@MaxStarkenburg 实际上你根本不需要内部引号。 - Robert Longson

4个回答

3

“linearGradient”的G需要大写
URL中的内部引号无效
路径需要关闭

由于您没有提供路径的d属性，我已将其替换为矩形。

<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>

- Robert Longson

嗨，感谢您的回答，SVG由多个路径组成，如果您想要，我可以将其插入到答案中，但我认为渐变与路径结构无关。而在我的jQuery代码中，我写了linearGradient，但在Chrome开发者工具中全部小写...为什么会这样呢？ - MarBer

1

这是一个Chrome bug。 - Robert Longson

1

最终可行的解决方案是避免使用jQuery，全部由php在服务器端设置。如果有人必须使用javascript或jQuery而没有其他选择，我建议参考这篇文章[链接]（https://dev59.com/VmTWa4cB1Zd3GeqPFJw5）。感谢@Robert Longson编辑答案并提供帮助。 - MarBer

1

这是因为网站的DOM中有多个SVG实例，所以每个实例都使用相同的ID属性。例如：

原问题中的id="grC29M"

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

这个id的重复导致了意外的行为。我相信这也是@cuddlemeister在下面回答起作用的原因。看起来他改变了一个实例的id，因此没有id的重复，svg最终渲染得很好。

在某些情况下，如果svg的第一个实例没有被渲染但存在于dom中，那么我也会看到这个问题，但是如果鼠标悬停或点击第一个实例，则第二个实例甚至也会被渲染。

- wallop

0

除了其他答案之外，在我的情况下，我正在使用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”一样。

- Thomas Ramé

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- cuddlemeister · Accepted Answer

当我在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>

直到我将paint0_linear和paint1_linear的ID更改为gradient1和gradient2之前，问题一直很奇怪。或许这可以帮到某个人。