SVG被切断了

Question

我在这里找到了一个我不明白的答案.不幸的是我还没有发表评论.

Boris Zbarsky接受的答案描述了为什么它不起作用.我不完全理解这个答案,并想知道如何纠正这个问题,以便我可以在Firefox上使用它.

对于我的情况,所有浏览器都有SVG文本元素,在Internet Explorer中,所有3个文本都可见,在Firefox和Chrome中,如果它们超过屏幕右侧的1/4,则任何SVG文本元素都会被截断.如果我将它们移动到想象中截止的左侧的开发者选项卡中,它们会显示出来.

沿着这个奇怪的区域没有可能隐藏SVG文本的div或块.

这是一个本地实现.

任何有关正在发生的事情的帮助都会非常有帮助.

Answer 1

我有类似的问题.尝试添加css属性:

overflow: visible

Answer 2

我遇到了同样的问题，结果发现其中一个标签中有一个剪辑路径。

<g id="undraw_the_search_s0xf 1" clip-path="url(#clip0)">

如果删除它，它应该呈现完整的 SVG。

Answer 3

文本元素上的x坐标大于应用于父SVG元素的宽度css.

这个简单的问题让我在圈子里跑了好几个小时.

Answer 4

我能够通过调整 viewBox 来解决这个问题（或类似的问题）： <svg viewBox="0 0 100 100" 我使用了第三个和第四个参数，并将它们降低到 ~60 为我解决了这个问题。

Answer 5

在我们的例子中，这是因为我们在一个页面中渲染了许多SVG图标，并且它们具有相同的clipPath id，当在同一页面中渲染时，它们将使用另一个图标中的clipPath。