Html 隐藏用于渐变的svg

我需要在单独的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>

特定问题的链接是

---

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

visibility:hidden

#asd{
可见性：隐藏；
}

---

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

visibility: hidden;
position: absolute;

---

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

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

我会：

• 像第一个一样选择一个SVG（没关系）
• 添加到it定义组：

• 在那里描述你所有的梯度
• 然后让同一页面中的所有其他SVG只参考 那些梯度

---

这样你就不必做那些奇怪的变通方法了……

你说的“隐藏svg而不影响渐变”是什么意思？我在你的代码中看到了两个svg。我想你的意思是试图隐藏id为

asd

？@Jhecht-yup的svg，我需要从页面中隐藏第一个svg。如果我把它隐藏起来，那么渐变在第二个SVG中就不起作用了。你有没有想过把它放在屏幕外？@Jhecht的意思是绝对定位，给top和left一个巨大的负值？？是的，这就是我所指的。为什么不显示：没有，这使得子树甚至没有被处理？@DanielB。然后您不能引用该渐变svg，因为浏览器“忽略”

display:none

elementsHmm，您是对的。有些浏览器会。有些浏览器没有。所以这不是一个好建议。因为一个好的开发者会尝试让他的应用程序在所有浏览器上都能运行