老师，哪里不对呢？

<rect x="0" y="100" width="100" height="50"/> 矩形的x y坐标是相对哪个原点定位的啊？？

<!doctype html>

<html>

<head>

<title>Document</title>

</head>

<body>

<defs>

</clipPath>

</linearGradient>

</defs>

</svg>

</body>

</html>

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

收起

3回答

Miss路回答被采纳获得+3积分 2018-12-31 16:50:05

对，你直接改成<rect x="50" y="50" width="100" height="50"/>也是可以的，我给你的参考是考虑了整体的布局，其实都一样。预留的代码只是一个参考，不是绝对的正确，可以在写的时候灵活应变。

另外，你提到的rect的坐标是什么：

x="0" 定义矩形到画布窗口左侧的距离是 0px；

y="0" 定义矩形到画布窗口顶端的距离是 0px；

例如：

而这个问题中，你截取的是矩形区域内的圆的内容：

这样说同学应该能明白了，欢迎采纳！

祝学习愉快！

小章鱼丸提问者 #1

原来矩形截取（覆盖）的圆的部分是要保留的啊？！之前讲创建剪切的定义是“擦除已经创建的元素的部分内容”，还以为<clipPath>里覆盖的内容是要剪切掉的呢！

2018-12-31 16:59:06
Miss路回复提问者小章鱼丸 #2

是的，是覆盖的会保留，同学可以参考老师给的例子，或者是自己写例子验证一下。如果帮助到了你，欢迎采纳！祝学习愉快！

2019-01-02 09:51:47

提问者小章鱼丸 2018-12-31 15:07:56

老师讲课：

代码里<rect>的左上角在0，0位置（<rect x="0" y="0"/>)，也没有讲这个（0，0）具体是体现在图上的哪个位置，从哪块开始覆盖的，所以这块是懵的

Miss路 2018-12-31 14:40:30

同学，你好。

主要还是参数的设置有问题：

从你的代码中可以看出来其实还没有完全了解老师讲的内容，建议同学再把课程听一遍，好好分析一下，这些参数之间的关系。把老师讲的每一个例子都自己动手写一下。

如果帮助到了你，欢迎采纳！

祝学习愉快！

提问者小章鱼丸 #1

题目原本给的参数<svg viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg"> svg的宽、高就是400和200我都没动。按我的设置应该改的就是一个<rect>的x y定位改成<rect x="50" y="50" width="100" height="50"/>就行了。老师讲的内容我理解了，就是这个rect的起始坐标这块，它的x、y相对的起始原点是哪里，和圆形相对的原点是不是一个

2018-12-31 14:59:15