隐藏用于梯度的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>

特定问题的链接是

https://jsfiddle.net/6f45bx02/

Answer 1

您可以将它们添加到渐变SVG样式规则

visibility: hidden;
position: absolute;

它将隐藏您的SVG，然后将SVG元素从页面流中取出，因此它不会占据页面上的任何像素

Answer 2

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

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 3

danielG.Blázquez在这里发现了您可以将宽度和高度设置为" 0"，并显示为" block"。因此，您达到了与display ="无"的效果相同的效果，但是梯度将保持可见。

Answer 4

我会做：

• 像第一个（没关系）那样选择您的SVG之一
• 添加到IT定义组：<defs></defs>
• 在其中描述您的所有梯度
• 然后让您在同一页面中拥有的所有其他SVG只需参考那些梯度。

这样，您不必进行那些怪异的解决方法...