如何从页面隐藏svg？

Question

我在页面上有4个元素，它们使用相同的svg渐变

<svg> <defs> <linearGradient id="gradient"> <stop offset="0%" style="stop-color: deepPink"></stop> <stop offset="100%" style="stop-color: #009966"></stop> </linearGradient> </defs> </svg>

我只想在页面上定义一次，就不应该看到它。但是此svg块会在页面上移动其他块，尺寸为150x300

这些svg块应该在页面上可见，并使用上述svg渐变。

<svg> <rect width="100" height="100" stroke="#eee" stroke-width="5" fill="url(#gradient)"></rect> </svg> <svg> <rect width="100" height="100" stroke="#eee" stroke-width="5" fill="url(#gradient)"></rect> </svg>

Answer 1

以下CSS对我有用，以隐藏该块。

svg defs {
  height: 0;
  position: absolute;
  width: 0;
}

如其他答案所述，display:none将破坏def并visibility:hidden仍然占用页面空间。