Svg 更通用的函数，用于将objectBoundingBox坐标中的线性渐变转换为userSpaceOnUse坐标

我需要将线性渐变元素从

objectBoundingBox

坐标转换为

userSpaceOnUse

坐标。原因是SVG将由不支持

objectBoundingBox

的引擎呈现。请注意，线性渐变仅由一个图形元素引用

输入SVG

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="myGradient" x1="0%" y1="0%" x2="100%" y2="100%" gradientUnits="objectBoundingBox">
      <stop offset="40%" stop-color="yellow" />
      <stop offset="50%" stop-color="black" />
      <stop offset="60%" stop-color="red" />
    </linearGradient>
  </defs>

  <rect x="50" y="50" width="100" height="50" fill="url('#myGradient')" />
</svg>

输出SVG

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="myGradient" x1="0%" y1="0%" x2="100%" y2="100%" gradientUnits="objectBoundingBox">
      <stop offset="40%" stop-color="yellow" />
      <stop offset="50%" stop-color="black" />
      <stop offset="60%" stop-color="red" />
    </linearGradient>
  </defs>

  <rect x="50" y="50" width="100" height="50" fill="url('#myGradient')" />
</svg>

我替换坐标并添加属性

gradientUnits=“userSpaceOnUse”

坐标转换器适用于上面的SVG，但不适用于下面的SVG。如何将坐标转换器推广到以下SVG

<svg xmlns="http://www.w3.org/2000/svg" >

  <defs>
    <linearGradient id="myGradient" x1="0%" y1="0%" x2="100%" y2="0%"  gradientUnits="objectBoundingBox">
      <stop offset="40%" stop-color="#ff0"/>
      <stop offset="50%" stop-color="#000"/>
      <stop offset="60%" stop-color="#f00"/>
    </linearGradient>
  </defs>

  <rect x="75" y="0" height="150" width="100" fill="url(#myGradient)">
</svg>

<svg xmlns="http://www.w3.org/2000/svg" >

  <defs>
    <linearGradient id="myGradient" x1="0%" y1="0%" x2="100%" y2="0%"  gradientUnits="objectBoundingBox">
      <stop offset="40%" stop-color="#ff0"/>
      <stop offset="50%" stop-color="#000"/>
      <stop offset="60%" stop-color="#f00"/>
    </linearGradient>
  </defs>

  <rect x="75" y="0" height="150" width="100" fill="url(#myGradient)">
</svg>