存在DOM的实际剪辑路径？

Question

实际存在DOM的方法clipPath？而不是使用

setAttribute("style","clip-path: value")？，

因为我认为使用setAttribute会降低性能，而element.style.clipPath之类的使用和方法会更容易。

＆＃13;

＆＃13;

function s() {
 var i = 100, p = document.getElementById("p");
 function f(){
 if(i > 0) {
 i-= 1; 
 p.setAttribute("style","clip-path:inset(0 0 0 "+i+"%");  
 setTimeout(f, 50);
 }
 }
 f();
}
s();

＆＃13;

<img width="150" height="150" src="https://i.stack.imgur.com/CE5lz.png" id="p">

＆＃13;

＆＃13;

＆＃13;

Answer 1

是的，element.style.clipPath = "..."运行正常。不，这不是更好的表现。

Answer 2

设置时似乎工作正常。确保不包括分号。

＆＃13;

＆＃13;

var x = 0, dir = 1
function move() {
  x+=dir
  if (x>=400 || x<=0) dir*=-1
  document.querySelector(".circleClass").style.clipPath = "circle(200px at " + x + "px " + x + "px)";
  window.setTimeout(move,10)
}
move()

＆＃13;

.circleClass {
  clip-path: circle(200px at 0px 0px);
}

＆＃13;

<img src="http://lorempixel.com/400/400/sports/" class="circleClass" />

＆＃13;

＆＃13;

＆＃13;