Question

如果有人可以帮我解决以下问题，我将非常感激：

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

谢谢！

Answer 1

你也可以让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>

在Firefox中的svg圆角剪辑（在ie9和chrome中工作正常）

1 个答案: