svg - 用于嵌套 svg 元素中的线性渐变的坐标系

Question

对于<linearGradient>，属性 gradientUnits 定义用于属性 x1、y1、x2 和 y2 的坐标系。在下一个示例中，我在嵌套的 SVG 元素中使用了 linearGradient。的值gradientUnits = "userSpaceOnUse"表示属性表示坐标系中的值，这些值是在引用渐变元素时将当前用户坐标系置于适当位置而产生的。

渐变元素在具有不同视图框的嵌套 svg 元素内使用。请注意 x2="100%"

svg{border:solid}

<svg viewBox="0 0 350 150"> 
<defs>
  <linearGradient id="usou"
x1="10" x2="100%" y1="10" y2="10" gradientUnits = "userSpaceOnUse">
   <stop offset="0%" stop-color="hsl(120,100%,30%)"></stop>
   <stop offset="50%" stop-color="white"></stop>
   <stop offset="100%" stop-color="hsl(320,100%,50%)"></stop>
  </linearGradient>
 </defs>
  <svg width="150" height="60" viewBox="0 0 250 100">
 <rect x="10" y="10" fill="url(#usou)" width="250" height="100"></rect>
</svg>
</svg>

Chrome 和 Firefox 中的结果不同：

显然 Chrome 使用的是父 sv​​g 的参考坐标系，而在 Firefox 中使用的是嵌套 svg 元素的参考坐标系。

Chrome 或 Firefox 是否失败？

标签： svg