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

【问题标题】：How to fix SVG top and left stroke truncation?如何修复 SVG 顶部和左侧笔划截断？
【发布时间】：2013-11-13 12:57:01
【问题描述】：

我在 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 后，它们得到了修复。但它现在似乎不适用于椭圆。

谁能帮我解决这个问题？

提前谢谢！

【问题讨论】：

在 Firefox 上对我来说似乎很好。可能你使用的 UA 不支持溢出：可见
@RobertLongson 是的，我刚刚检查过，它在 Firefox 上运行良好，但在 chrome 和 chromium 中显示问题（两者都已更新）。您能提出解决方案吗？
你的意思不是使用 Firefox ;-)
@RobertLongson 哈哈哈.. 是的，除了使用 Firefox！我在问题中提到的过去的矩形问题，在使用 overflow:visible; 后在所有浏览器中得到了修复

标签： html css svg ellipse

【解决方案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 文档类型并使用内联 SVG，它应该显示溢出的内容，因为溢出的默认值是可见的，并且 HTML5 允许内联 SVG 元素溢出。

所以要么检查你的文档类型，要么重新定位中心以考虑笔划宽度。

关于 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

【讨论】：

我对溢出包含 svg 标记的椭圆没有问题，我过去在矩形方面也遇到过类似的问题。问题是，在 chrome 中使用 overflow:visible; 后，溢出部分看不到，就像在矩形中一样。
@SurenderThakran 我建议确保您的 HTML 以 <!DOCTYPE html> 开头，以确保它实际上处于 HTML5 模式...
@SurenderThakran 增加中心 x 和 y 以考虑笔划宽度，目前看来这是在修复错误之前唯一可以做的事情。

【解决方案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

【讨论】：