Question

我在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替换stop-color值，或者（甚至更好）在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>

Answer 1

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

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

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

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

＆＃13;

.stop1 {
  stop-color: blue;
}

.stop2 {
  stop-color: yellow;
}

＆＃13;

<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>

＆＃13;

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

如何使用较少的@variable用于SVG内联样式“stop-color”

1 个答案: