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仍占用页面空间。

Answer 2

svg元素的width和height属性的默认值为100％，这意味着SVG视口取决于它所在的父容器。

来自w3 spec：

SVG用户代理与其父用户代理协商，以确定SVG用户代理可以将文档呈现到的视口。

要解决您的问题，您可以直接在0标记上将宽度和高度属性设置为svg，但也可以使用CSS。

要阻止svg元素占用页面空间，请使用display: none。在这种情况下，我不确定浏览器对渐变的支持，但是有一些解决方法。检查this Bugzilla post。

Answer 3

如果要隐藏SVG的定义，请将其宽度和高度属性设为0

Answer 4

这是对我有效的另一种方法。我将width和height属性设置为0，还将display属性设置为none。

<svg width="0" height="0" display="none">
  <defs>
    <g id="my-object">...</g>
  </defs>
</svg>

如何隐藏svg从页面？

4 个答案: