Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/32.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/elixir/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 分析‘;的值时出错;剪辑路径’;_Javascript_Css_Clip Path - Fatal编程技术网

Javascript 分析‘;的值时出错;剪辑路径’;

Javascript 分析‘;的值时出错;剪辑路径’;,javascript,css,clip-path,Javascript,Css,Clip Path,我试图在用户鼠标周围创建剪辑路径。这是我的代码: const rect = this.image.getBoundingClientRect(); const width = rect.right - rect.left; const height = rect.bottom - rect.top; const clipSizePx = 10; const clipSizePerc = 100 * (clipSizePx / Math.max(width, height)); const m

我试图在用户鼠标周围创建剪辑路径。这是我的代码:

const rect = this.image.getBoundingClientRect();
const width = rect.right - rect.left;
const height = rect.bottom - rect.top;

const clipSizePx = 10;
const clipSizePerc = 100 * (clipSizePx / Math.max(width, height));

const mouseXPerc = 100 * ((e.clientX - rect.left) / width);
const mouseXStartPerc = Math_cap(mouseXPerc - clipSizePerc / 2, 0, 100);
const mouseXEndPerc = Math_cap(clipSizePerc/2 + mouseXPerc, 0,100);

const mouseYPerc = 100 * ((e.clientY - rect.top) / height);
const mouseYStartPerc = Math_cap(mouseYPerc - clipSizePerc / 2, 0, 100);
const mouseYEndPerc = Math_cap(mouseYPerc + clipSizePerc / 2, 0, 100);
const clipPath = "clip-path: polygon(0% 0%, 0% 100%, "
    + mouseXStartPerc + "% 100%,"
    + mouseXStartPerc + "% " + mouseYStartPerc + "%,"
    + mouseXEndPerc + "% " + mouseYStartPerc + "%,"
    + mouseXEndPerc + "% " + mouseYEndPerc + "%,"
    + mouseXStartPerc + "% " + mouseYEndPerc + "%,"
    + mouseXStartPerc + "% 100%,"
    + " 100% 100%,"
    + " 100% 0%);";
console.log("Clip path: ", clipPath,"\nMouse: ", [mouseXPerc, mouseYPerc]);
this.image.style.clipPath = clipPath;
这是我尝试指定的剪辑路径:

clip-path: polygon(0% 0%, 0% 100%, 30.90039334549982% 100%,30.90039334549982% 58.02269121483121%,32.229061634508525% 58.02269121483121%,32.229061634508525% 59.351359503839916%,30.90039334549982% 59.351359503839916%,30.90039334549982% 100%, 100% 100%, 100% 0%); 
这是一个错误,完全没有帮助:

分析“剪辑路径”的值时出错。声明被撤回

我真的很想知道为什么CSS错误总是毫无用处


无论如何,有人看到剪辑路径有什么问题吗?

规则不应以分号结尾

el.style.clipPath = "polygon(...)";   // OK
el.style.clipPath = "polygon(...);";  // Fail

它似乎工作得很好。您是否只得到一个错误,或者您也没有看到应用的掩码?