如果有人能帮助我解决以下问题，我将不胜感激:
当圆 Angular 添加到 svg Canvas 时，chrome 和 ie9 都可以正确执行裁剪。然而，Firefox (v13.0) 会忽略圆 Angular 。我可以在 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>
谢谢!
最佳答案
您也可以让 svg 矩形具有相同的圆 Angular 。
<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>
关于css - Firefox 中的 svg 圆 Angular 剪裁(在 ie9 和 chrome 中工作正常)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10955401/