3

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

以下是我的 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%);
}

您也可以在此处查看运行代码。

过去我在矩形方面遇到过类似的问题，在使用overflow:visible;包含 svg 后它们得到了修复。但它现在似乎不适用于椭圆。

谁能帮我解决这个问题？

提前谢谢！

4

2 回答 2

4

更新：看起来至少在 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 开发者文档和这个 MSDN 博客上的一篇很好的文章中找到，它解释了默认溢出。

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
于 2013-11-13T13:13:51.453 回答
0

添加一个描述 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>

演示在这里

于 2013-11-13T20:10:49.413 回答