1

如果有人可以帮助我解决以下问题，我将不胜感激：

当圆角添加到 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>

谢谢！

4

1 回答 1

2

您也可以只使 svg rect 具有相同的圆角。

<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-09T14:46:43.793 回答