Question

我在SVG中创建了一个带有stroke-width和stroke的椭圆，但笔划的顶部和左侧都被截断了。它们似乎溢出了包含svg标记之外的内容。我尝试在SVG上使用overflow:visible;属性，但它仍然不起作用。

以下是我的HTML：

<div id="div1">
    <svg id="svg1">
        <ellipse id="oval1" cx="164.041666625656" cy="96.1319444204114" rx="164.041666625656" ry="96.1319444204114"></ellipse>
    </svg>
</div>

这就是它的CSS：

#div1 {
    padding:10px;
    margin:10px;
}
#svg1 {
    overflow:visible;
    margin-left:86.4305555339479;
    margin-top:-4.409722221119791;
}

#oval1 {
    fill:hsl(50.7692307692305,27.6595744680847%,68.0882352941177%);
    stroke-width:5.291666665343749;
    stroke:hsl(79.5918367346938,41.8803418803418%,40.5882352941176%);
}

您也可以看到running code here。

我过去曾遇到类似矩形的问题，并且在使用overflow:visible;包含svg后修复了它们。但现在它似乎不适用于省略号。

任何人都可以帮我解决这个问题吗？

Thnx提前！

Answer 1

更新：至少在Chrome（https://code.google.com/p/chromium/issues/detail?id=231577）中看起来存在这种行为的活动错误，并且也适用于Firefox（https://bugzilla.mozilla.org/show_bug.cgi?id=378923）。所以根据版本你可能会运气不好。在编写时，Chrome（32.0.1700.6 beta）中没有修复此问题，您可以使用此方法进行测试：http://jsfiddle.net/HRsvX/36/如果浏览器实现了当前的SVG 1.1规范，则所有三个三角形应完全可见。小提琴转载如下。

圆圈内部区域与SVG元素接壤。在HTML5t之前，SVG元素本身就像是一个图像或flash电影，它不能溢出到html文档中，它有自己的画布可以这么说。当您添加笔划（默认情况下位于您定义的区域之外）时，笔划将最终位于SVG画布之外。你必须在圆圈的中心考虑到这一点：

中心必须是半径+笔划宽度，因此您的中心x必须至少为164.041666625656 + 5.291666665343749才能完全适合SVG。

如果您指定HTML5 doctype并使用内联SVG，则应显示溢出内容，因为溢出的默认值是可见的，HTML5允许内联SVG元素溢出。

因此，请检查您的doctype或重新定位中心以考虑笔触宽度。

有关SVG元素溢出的更多内容可以在Mozilla developer documents中找到，而this MSDN blog上的一个很好的部分可以解释默认的溢出。

HTML

<div><svg height="100" width="100" viewbox="00 0 100 100">
  <path d="M210 10 L90 10 L90 90 " fill="red"/>
</svg></div>

<div><svg id="clip1" height="100" width="100" viewbox="00 0 100 100">
  <path d="M210 10 L90 10 L90 90 " fill="red"/>
</svg></div>

CSS

div {
    height:100px; width:100px;
    margin:1em auto;
    border: solid 1px black;
}

svg { overflow:visible }

#clip1 {clip: rect(-10px,-10px,-10px,-10px)} //nope
#clip2 {clip: auto} //nope

Answer 2

添加一个描述SVG内容的viewBox。然后，浏览器将确保整个椭圆及其笔划可见。如果您希望以1：1渲染它，则还需要添加等效的宽度和高度。

<svg id="svg1" width="335" height="199" viewBox="-3 -3 335 199">
    <ellipse id="oval1" cx="164.041666625656" cy="96.1319444204114" rx="164.041666625656" ry="96.1319444204114" />
</svg>

Demo here

如何修复SVG顶部和左侧笔划截断？

2 个答案: