隐藏用于渐变的 svg

Question

我需要在单独的 div 中为多个 svg 对象提供渐变，为此我创建了一个全局 svg 来仅定义渐变。定义的 svg 具有高度和宽度。如果我将宽度和高度减小为零，则渐变不起作用。有什么方法可以隐藏svg而不影响渐变。

创建svg渐变和svg的代码是

<svg id="asd">
  <linearGradient id="linear" gradientUnits="userSpaceOnUse" x1="100%" y1="100%" x2="100%" y2="0%">
    <stop stop-color="#FFFFFF" offset="0" />
   <stop stop-color="#f3b65a" offset="0.5" />
   <stop stop-color="#FFFFFF" offset="1" />
 </linearGradient>
</svg>
<svg>
  <rect x="10" y="10" width="600" height="200" fill="url(#linear)" />
</svg>

特定问题的 link 是

https://jsfiddle.net/6f45bx02/

Answer 1

您可以随时使用。这会隐藏元素但保持定位。

visibility:hidden

#asd{
  visibility:hidden;
}

<!-- SVG syntax -->
<svg id="asd">
  <linearGradient id="linear" gradientUnits="userSpaceOnUse" x1="100%" y1="100%" x2="100%" y2="0%">
    <stop stop-color="#FFFFFF" offset="0" />
    <stop stop-color="#f3b65a" offset="0.5" />
    <stop stop-color="#FFFFFF" offset="1" />
  </linearGradient>
</svg>
<svg>
  <rect x="10" y="10" width="600" height="200" fill="url(#linear)" />
</svg>

Answer 2

您可以将这些添加到您的渐变 svg 样式规则中

visibility: hidden;
position: absolute;

它将隐藏您的 svg，并将该 svg 元素从您的页面流中移除，这样它就不会占用您页面上的任何像素

Answer 3

Daniel G. Blázquez 发现您可以将宽度和高度设置为“0”并显示为 "block"。因此，您可以实现与 display="none" 相同的效果，但渐变将保持可见。

Answer 4

我会做：

像第一个一样选择一个 SVG（无所谓）
添加到定义组：<defs></defs>
在那里描述你所有的渐变
然后让您在同一页面中拥有的所有其他 SVG 仅供参考那些梯度。

这样您就不必执行那些奇怪的解决方法...

隐藏用于渐变的 svg

Hide svg used for gradient

html

css

svg

gradient