CSS中的254度= SVG中的164度（254-90）

body { display: flex }

div {
  background: linear-gradient(254.81deg, #1A50FF 8.13%, #1EE9B6 92.46%);
  width: 200px;
  height: 200px;
  margin-right: 30px;
}

<div>CSS</div>

<svg width="200" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="myGradient" gradientTransform="rotate(164.81 0.5 0.5)">
      <stop offset="8.13%" stop-color="#1A50FF" />
      <stop offset="92.46%" stop-color="#1EE9B6" />
    </linearGradient>
  </defs>
  <rect x="0" y="0" width="10" height="10" fill="url('#myGradient')" />
</svg>

内部def使您的线性渐变和您想在SVG中使用它们的位置用作url：

<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="Gradient1">
      <stop class="stop1" offset="0%" />
      <stop class="stop2" offset="50%" />
      <stop class="stop3" offset="100%" />
    </linearGradient>
    <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
      <stop offset="0%" stop-color="red" />
      <stop offset="50%" stop-color="black" stop-opacity="0" />
      <stop offset="100%" stop-color="blue" />
    </linearGradient>
    <style>
      <![CDATA[
              #rect1 { fill: url(#Gradient1); }
              .stop1 { stop-color: red; }
              .stop2 { stop-color: black; stop-opacity: 0; }
              .stop3 { stop-color: blue; }
            ]]>
    </style>
  </defs>

  <rect id="rect1" x="10" y="10" rx="15" ry="15" width="100" height="100" />
  <rect
    x="10"
    y="120"
    rx="15"
    ry="15"
    width="100"
    height="100"
    fill="url(#Gradient2)" />
</svg>