Question

我一直在乱搞SVG，看看我是否可以像几乎父/控制器元素那样使用它们，它能够将其渐变颜色值传递给其他HTML标记元素。

基本上，我想知道是否可以在按钮标记上放置一个buy-button_normal类，然后使用fill: url(#gradient);直接继承渐变。我知道可以将SVG嵌入按钮或将其用作背景图像。但我想弄清楚是否能够直接从具有特定ID的SVG继承颜色/渐变。

.buy-button {
  border: none;
  width: 18.38rem;
  height: 2.125rem;
  border-radius: 0.2rem 0.2rem 0.2rem 0.2rem;
}

.buy-button_normal {
  fill: url(#gradient);
}

<svg height="0" width="0">
  <defs>
    <linearGradient _ngcontent-uwo-30="" gradientUnits="userSpaceOnUse" id="gradient" x1="147.18" x2="147.18" y1="1.83" y2="34.71">
      <stop offset="0" stop-color="#e55766"></stop>
      <stop offset="1" stop-color="#be1e66"></stop>
    </linearGradient>
  </defs>
</svg>

<svg  class="buy-button">
  <rect class="buy-button buy-button_normal" height="34.2" rx="2" ry="2" style="disabled" width="294.37">
  </rect>
</svg>

<button class="buy-button buy-button_normal">
  <span  class="buy-button__normal-text">BUYING</span>
    <div  class="spinner buy-button__spinner">
    </div>
</button>

在HTML元素上使用SVG颜色？

0 个答案: