在HTML中隐藏SVG元素而不禁用内部定义的剪辑路径? [英] Hiding an SVG element in HTML without disabling clip paths defined inside?

问题描述

参考问题 clip-path在SVG Sprite中不起作用，看来我们不能使用style="display:none"隐藏定义了将在其他地方使用的剪切路径的SVG元素.

With reference to the question clip-path not working in SVG sprite, it seems we can't use style="display:none" to hide an SVG element that defines a clip path that will be used elsewhere.

但是，对于给定的隐藏选项(使用width="0" height="0")，建议的替代方法对我不起作用(至少在Chrome中，SVG元素仍在页面布局中获得分配的空间，这会导致显示垂直滚动条，因为我上面有height="100%"的div).还有什么其他方法可以隐藏SVG，而不会阻止它用于剪辑?

However, the suggested alternative for hiding it given (using width="0" height="0") is not working for me (at least in Chrome, the SVG element still gets allocated space in the page layout, which causes a vertical scroll bar to appear, as I have a div with height="100%" above it). What other was are available for hiding an SVG that won't stop it being used for clipping?

推荐答案

最后，我使用position:absolute将项目从通常的HTML文档流中删除.我不明白为什么零尺寸的元素会导致滚动条出现，但这肯定是正在发生的事情.

In the end, I used position:absolute to take the item out of the usual HTML document flow. I don't understand why a zero-sized element would cause scrollbars to appear, but that certainly seemed to be what was happening.

这篇关于在HTML中隐藏SVG元素而不禁用内部定义的剪辑路径?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！