如何给svg中的线性渐变作为div的背景色？

Question

我有一个像svg

<svg>
    <linearGradient id="SVGID_124_" gradientUnits="userSpaceOnUse" x1="205.2935" y1="707.9475" x2="206.9863" y2="707.9475" gradientTransform="matrix(41.432 0 0 -41.432 -8114.9512 30139.9746)">
      <stop  offset="0" style="stop-color:#0071BC"/>
      <stop  offset="3.780070e-02" style="stop-color:#0071BC"/>
      <stop  offset="0.6151" style="stop-color:#00538B"/>
      <stop  offset="0.784" style="stop-color:#004C86"/>
      <stop  offset="0.9966" style="stop-color:#003B7C"/>
      <stop  offset="1" style="stop-color:#003B7C"/>
    </linearGradient>
</svg>

我不确定如何将线性渐变作为按钮的背景。我尝试了以下方法，但是我不知道如何在CSS中进行渐变变换。

.btn {
  background: linear-gradient(to right, #0071BC 0%, #0071BC 37.80070%, #00538B 061.51%, #004C86 078.4%, #003B7C 099.66%, #003B7C 100%);
  color: white;
  border-radius: 8px;
  /* border: 1px solid #00538B; */
  width: 95%;
  height: 25px;
  padding: 0px;
}

<button class="btn">button</button>

有人可以帮忙吗？ 预计看起来像这样

但是我得到类似的东西：

Answer 1

这是CSS中的近似渐变。

.btn {
  background: linear-gradient(to right, #0071bd 0%,#0171bb 39%,#016db5 41%,#005691 58%,#005691 59%,#01538b 61%,#014c86 78%,#003c7b 100%);
  
  border-radius: 5px;
  color: #fff;
  border: none;
}

<button class="btn">Closed</button>

通常，我使用gradient editor by colorzila从image / css /手动生成渐变。可能还有其他工具。

您可以使用SVG本身，但：

1. 您必须确保渐变的坐标与元素（又名.btn）相匹配（在这种情况下不是）。
2. 您需要将其转换为base64。

为了快速修复，在下面的代码段中，我创建了一个脚本，该脚本读取html中的svg并将其转换为base64，以便您可以使用它来调整渐变。

我还更改了一些SVG语法，请看一下：

const svg = document.querySelector('svg').outerHTML;
const base64 = window.btoa(svg);

document.querySelector('.btn').style.backgroundImage = `url(data:image/svg+xml;base64,${base64})`;

.btn {
  background: top repeat-x;
  background-size: cover;
  
  border-radius: 5px;
  color: #fff;
  border: none;
}

<button class="btn">Closed</button>

<svg width="1000px" height="30000px" xmlns="http://www.w3.org/2000/svg" style="display: none">
    <linearGradient id="SVGID_124_" gradientUnits="userSpaceOnUse" x1="205.2935" y1="707.9475" x2="206.9863" y2="707.9475" gradientTransform="matrix(41.432 0 0 -41.432 -8114.9512 30139.9746)">
      <stop  offset="0" style="stop-color:#0071BC"/>
      <stop  offset="3.780070e-02" style="stop-color:#0071BC"/>
      <stop  offset="0.6151" style="stop-color:#00538B"/>
      <stop  offset="0.784" style="stop-color:#004C86"/>
      <stop  offset="0.9966" style="stop-color:#003B7C"/>
      <stop  offset="1" style="stop-color:#003B7C"/>
    </linearGradient>
    <g>
  <rect fill="url(#SVGID_124_)" stroke-width="0" x="0" y="0" width="100%" height="100%" />
 </g>
</svg>