SVG圆角裁剪

我真的很感激它（在IE9和Chrome正常工作），如果有人可以帮助我以下的问题：SVG圆角裁剪

当圆角添加到SVG画布，Chrome和IE9正确执行裁剪。然而，Firefox（v13.0）忽略了圆角。我可以在svg中手动进行裁剪，但我想知道是否有更好的解决方案。

下面是代码：

<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 
    <svg id="paper" version="1.1" width="300" height="300" style="border-radius: 20px; background-color: red;"> 
     <rect x="0" y="0" width="400" height="400" fill="blue"> 
    </svg> 
</body> 
</html>

谢谢！

来源

2012-06-08 egor

https://bugzilla.mozilla.org/show_bug.cgi?id=763133对Firefox 16目前的时间表。 –

期待修复:) – egor

你也可以让svg矩形具有相同的圆角。

<svg id="paper" version="1.1" width="300" height="300" style="border-radius: 20px; background-color: red;"> 
    <rect id="background" width="100%" height="100%" rx="20" fill="red"/> 
</svg>

或者，如果你需要的裁剪，有点像你的建议：

<!DOCTYPE html> 
<html> 
<body> 
<svg id="paper" version="1.1" width="300" height="300" clip-path="url(#clip)"> 
    <defs> 
     <clipPath id="clip"> 
      <rect id="background" width="100%" height="100%" rx="20" fill="red"/> 
     </clipPath> 
    </defs> 
    <rect width="100%" height="100%" fill="red"/> 
</svg> 
</body> 
</html>

来源

2012-06-09 14:46:43

对不起，我应该解释我的目标。我正在研究一个需要缩放和平移的项目，因此容器中的东西无法避免。我可能会随着cl go而去。感谢代码！ – egor

回答

相关问题