実際にDOMのクリップパスが存在しますか？

Question

実際にはDOMのメソッドclipPathが存在しますか？代わりに使用

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

私が使用setAttributeメソッドは、パフォーマンスのために悪いことであると思うので、使いや方法element.style.clipPath等で容易になります。

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();

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

Answer 1

設定するとうまく動作しているようです。セミコロンを含めないようにしてください。

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()

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

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

Answer 2

はい、element.style.clipPath = "..."が正常に動作します。いいえ、パフォーマンスは良くありません。