如何为 SVG 内联样式“stop-color”使用 less @variable答案

【问题标题】：How to use less @variable for SVG inline style "stop-color"如何为 SVG 内联样式“stop-color”使用 less @variable
【发布时间】：2017-09-05 12:07:53
【问题描述】：

我在 color.less 中有两个颜色变量

@color-example-1: red;
@color-example-2: yellow;

example.html 中的 svg 看起来像这样：

<svg viewBox="0 0 48 48">
  <style type="text/css">
    .st0{fill:url(#SVGID_1_);}
  </style>
  <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="24" x2="48" y2="24">
    <stop  offset="0" style="stop-color:#FFF33B"/>
    <stop  offset="1" style="stop-color:#E93E3A"/>
  </linearGradient>
  <circle class="st0" cx="24" cy="24" r="24"/>
</svg>

是否可以用 @variable 替换停止颜色值，或者（甚至更好）在 css 文件中定义整个 linearGradient？

期望的结果是这样的：

css

.example-gradient {
  background: linear-gradient(135deg, @color-example-1 0%,@color-example-2 100%);
}

html

<svg viewBox="0 0 48 48">
  <circle class="example-gradient" cx="24" cy="24" r="24"/>
</svg>

【问题讨论】：

标签： css svg less gradient linear-gradients

【解决方案1】：

您无法在 CSS 中定义整个渐变。 CSS 渐变目前不适用于 SVG 元素。他们可能在未来的某一天。如果他们这样做了，您将使用类似以下的内容：

circle {
  fill: linear-gradient(to right, yellow, orange)
}

然而，一切都没有丢失。您绝对可以在 SVG 渐变定义中重新设置 <stop> 元素的样式。

请注意，SVG 渐变中的 style="stop-color: ..." 将覆盖您定义的任何 CSS。因此，您需要做的第一件事是将其删除，或将其更改为演示属性 (stop-color="#abcdef")。

.stop1 {
  stop-color: blue;
}

.stop2 {
  stop-color: yellow;
}

<svg viewBox="0 0 48 48">
  <style type="text/css">
    .st0{fill:url(#SVGID_1_);}
  </style>
  <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="24" x2="48" y2="24">
    <stop  offset="0" class="stop1" stop-color="#FFF33B"/>
    <stop  offset="1" class="stop2" stop-color="#E93E3A"/>
  </linearGradient>
  <circle class="st0" cx="24" cy="24" r="24"/>
</svg>

请注意，我显然没有在这里使用 LESS，但只要您的 SVG 内联在 HTML 中，它应该可以正常工作。

【讨论】：