如何从页面中隐藏 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

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

Answer 2

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

来自w3 spec:

The SVG user agent negotiates with its parent user agent to determine the viewport into which the SVG user agent can render the document.

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

要防止 svg 个元素在页面上占用 space，请使用 display: none。在这种情况下，我不确定浏览器是否支持渐变，但有变通办法。检查 this Bugzilla post.

Answer 3

以下 CSS 对我来说隐藏了方块。

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

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

Answer 4

这是对我有用的另一种方法。我将宽度和高度属性设置为 0，并将显示属性设置为 none，就像这样。

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

如何从页面中隐藏 svg？

How to hide svg from the page?

html

svg