SVG被切断了

时间:2014-07-22 18:23:22

标签: google-chrome firefox text svg

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

以下是答案的链接SVG renders but gets cut off in Firefox only - why?

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

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

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

这是一个本地实现。

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

7 个答案:

答案 0 :(得分:12)

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

overflow: visible

答案 1 :(得分:10)

我遇到了同样的问题,其中一个标签中有一个剪切路径

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

如果删除,它将呈现完整的SVG

答案 2 :(得分:9)

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

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

答案 3 :(得分:1)

我遇到了类似的问题:

我的块在IE9中完全渲染,但在Chrome中略有截止。

修复:

onCreate()

答案 4 :(得分:0)

我遇到了同样的问题,这是一个徽标并解决了我只需要在插图画家的画板右边缘添加更多空间的问题。 Firefox正在削减艺术作品的右侧一小部分。

Firefox扩展内容&amp;如果在画板内的内容边缘没有足够的空间/宽度,它将被画板边界(内容呈现的空间边缘)剪切。

解决方案:在插图画家中创建的画板尺寸需要在图稿边界周围更大,以便在Firefox中为内容提供更多空间。

答案 5 :(得分:0)

我能够通过调整viewBox来解决此问题(或类似问题): <svg viewBox="0 0 100 100" 我使用了第3和第4个参数,并将它们降低到60左右。

参考:https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox

答案 6 :(得分:0)

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

在此处了解有关 clipPath 的更多信息https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath

相关问题