可以将SVG填充到内联CSS梯度字符串？

Question

<rect>

和A

100x100

<div>

。如果我想在线添加梯度，我可以将语法

linear-gradient(#f69d3c, #3f87a6);

用作其背景属性的有效CSS颜色。 尽管在CSS Spec中的同一位置指定（

fill

CSS数据类型，，但似乎是

not

，也可以接受有效的CSS颜色，但似乎是

not

Spec链接

HEREY

）。是否可以使这样的内联字符串适用于SVG

stroke

和url(...)？

？

我知道您可以

linear-gradient(...)

<image>

fill

iD，这个问题是特定的，如果可以通过字符串在线完成。 每个示例：

stroke

一种技术解决方案是在填充中嵌入整个SVG块，例如：

url()

这有点疯狂，而不仅仅是指定一个

<linearGradient>

，因此，如果有可能更明智的事情，那就太好了。

根据MDN：

它们与使用的位置分开定义，从而促进可重复性。您必须给每个梯度一个ID属性，以允许其他元素引用它。梯度定义可以放在元素或元素中。

您可以通过在SVG中添加定义来解决此问题：

<p>Fails. Can it be made to work?</p>
<div style="height: 100px; display: flex">
  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <!-- this fill won't work! -->
    <rect width="100" height="100" fill="linear-gradient(#f69d3c, #3f87a6)" />
  </svg>
</div>

<p>Works:</p>
<div
  style="
    width: 100px;
    height: 100px;
    background: linear-gradient(#f69d3c, #3f87a6);
  ">
</div>

我建议阅读以下内容：

Https：//ddeveloper.mozilla.org/en-us/docs/web/svg/svg/tutorial/gradients

有关更多信息

Answer 1