矩形的位置

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <svg viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <clipPath id="clip" >
                <rect x="00" y="00" width="100" height="50" fill="blue"/>
            </clipPath>
            
        </defs>
        <circle cx="50" cy="50" r="50" clip-path="url(#clip)" fill="red"/>
        <!-- <rect x="00" y="00" width="100" height="50" fill="blue"/> -->
    </svg>
</body>
</html>

这样画出来的矩形遮住圆形的下半部分，但是如果单独画一个同样的矩形，显示的位置却是原本圆形的上半部分：

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <svg viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg">
        <!-- <defs>
            <clipPath id="clip" >
                <rect x="00" y="00" width="100" height="50" fill="blue"/>
            </clipPath>
            
        </defs>
        <circle cx="50" cy="50" r="50" clip-path="url(#clip)" fill="red"/> -->
        <rect x="00" y="00" width="100" height="50" fill="blue"/>
    </svg>
</body>
</html>

这是为什么？矩形的位置应该怎么控制呢？

慕瓜9218797 2019-03-14

源自：SVG滤镜及动画效果 2-3 编程练习

收起

1回答

好帮手慕星星回答被采纳获得+3积分 2019-03-14 12:03:57

你好，rect标签中前两个参数就是矩形的位置，x是水平坐标，y是垂直坐标的。

例如现在要显示下半部分圆：

效果：

自己可以测试下，祝学习愉快！

收起回答

慕瓜9218797 提问者 #1

clipPath里面是图形需要保留的部分吗？我之前的理解是矩形的位置代表圆形被切除的部分

2019-03-18 12:10:47
好帮手慕星星回复提问者慕瓜9218797 #2

是保留的部分，矩形所在的位置就是显示的内容，把没有覆盖住的裁剪掉。

2019-03-18 15:42:31