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 に答える