隐藏用于渐变的 svg答案

【问题标题】：Hide svg used for gradient隐藏用于渐变的 svg
【发布时间】：2016-12-04 04:21:43
【问题描述】：

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

【问题讨论】：

“隐藏 svg 而不影响渐变”是什么意思？我在您的代码中看到了两个 svg。我假设您的意思是尝试隐藏 ID 为 asd 的 svg？
@Jhecht 是的，我需要从页面中隐藏第一个 svg。如果我隐藏它，那么渐变在第二个 svg 中不起作用
你有没有想过把它放在屏幕外？
@Jhecht 表示将其定位为绝对并给 top 和 left 一个巨大的负值？？
是的，我指的是这个。

标签： html css svg gradient

【解决方案1】：

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

visibility: hidden;
position: absolute;

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

【讨论】：

为什么不 display:none 使得子树甚至不被处理？
@DanielB。然后你不能引用那个渐变 svg，因为浏览器“忽略”display:none 元素
嗯，你是对的。有些浏览器可以。有些浏览器没有。所以不是一个好建议。
@DanielB。因为优秀的开发人员会努力让他的应用在所有浏览器上都能运行

【解决方案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>

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

我愿意：

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

这样你就不必做那些奇怪的解决方法了......

【讨论】：