能否为SVG的fill属性设置内联CSS渐变字符串？

假设有一个100x100的SVG <rect>元素和一个100x100的<div>元素：

• 给DIV内联添加渐变时，能直接用linear-gradient(#f69d3c, #3f87a6)作为background属性的CSS值，效果正常。
• SVG的fill和stroke属性支持合法CSS颜色值（包括url(...)），但似乎不支持linear-gradient(...)语法——尽管二者在CSS规范的<image>数据类型中被定义在同一位置。

想知道能否让这类内联的linear-gradient(...)字符串直接在SVG的fill和stroke属性中生效？（注：已经知道可以通过url()引用<linearGradient>的ID，本次只关注内联字符串实现的可能性）

示例代码 #

无效的SVG渐变

<p>Fails. Can it be made to work?</p>
<div style="height: 100px; display: flex">
  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <!-- 这个fill不会生效！ -->
    <rect width="100" height="100" fill="linear-gradient(#f69d3c, #3f87a6)" />
  </svg>
</div>

有效的CSS渐变

<p>Works:</p>
<div
  style="
    width: 100px;
    height: 100px;
    background: linear-gradient(#f69d3c, #3f87a6);
  ">
</div>

已知的繁琐解决方案 #

目前有一种可行但过于复杂的方式：在fill中内联完整的SVG渐变定义，比如：

<rect
  width="100"
  height="100"
  fill="url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3ClinearGradient%20x1=%220%25%22%20y1=%2250%25%22%20x2=%22100%25%22%20y2=%2250%25%22%20id=%22foo%22%3E%3Cstop%20offset=%220%25%22%20style=%22stop-color:rgb(255,255,255);stop-opacity:1;%22%3E%3C/stop%3E%3Cstop%20offset=%22100%25%22%20style=%22stop-color:rgb(0,0,0);stop-opacity:1;%22%3E%3C/stop%3E%3C/linearGradient%3E%3C/svg%3E#foo')" />

这种写法比直接写linear-gradient(...)麻烦太多，希望有更简洁的实现方式。

不行，SVG的fill/stroke属性本身不支持直接使用内联的linear-gradient(...)字符串，核心原因是SVG属性的颜色值规则和CSS背景属性的规则并不完全对齐：

1. 从规范逻辑来说，SVG的fill属性接受的是<paint>数据类型，虽然它包含了CSS的<image>类型，但linear-gradient()这类CSS渐变函数属于CSS层面的<image>值，并不在SVG原生属性支持的<paint>子集里——SVG原生只认url()引用内部/外部的渐变定义，或者纯色、图案等。

2. 如果你不想写繁琐的data URI，有两个相对简洁的替代方案：

   • 用CSS给SVG元素设置fill：把渐变写在CSS的style属性里，而不是SVG标签的fill属性中，写法和div的background完全一致：

     <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
       <rect width="100" height="100" style="fill: linear-gradient(#f69d3c, #3f87a6)" />
     </svg>
     

     这种写法简洁直观，主流浏览器都支持。
   • 简化SVG内部渐变定义：如果必须用SVG原生属性，可以把渐变定义放在SVG内部，写法比data URI清爽很多，还能复用渐变：

     <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
       <linearGradient id="grad">
         <stop offset="0%" stop-color="#f69d3c" />
         <stop offset="100%" stop-color="#3f87a6" />
       </linearGradient>
       <rect width="100" height="100" fill="url(#grad)" />
     </svg>
     

总结来说，最贴合你需求的简洁实现就是把渐变写在CSS的style属性里，用fill: linear-gradient(...)。

内容的提问来源于Stack Exchange，提问作者Simon Sarris