offset-path polyfill方法测试实例页面

CSS代码：

[is-offset-path]:not([style]) {
    visibility: hidden;
}

.horse-run {
    position: absolute;
    --offset-path: url(#road);
    offset-path: var(--offset-path);
    animation: motion 3s linear infinite;
}

.circle {
    width: 150px; height: 120px;
    background: radial-gradient(closest-side circle, deepskyblue, deeppink 80% 81%, deepskyblue 0%);
    --offset-path: circle(40%);
}
.circle-run {
    offset-path: var(--offset-path);
    animation: motion 3s linear infinite;
}

.horse-polygon {
    --offset-path: polygon(30% 0%, 70% 0%, 100% 50%, 30% 100%, 0% 70%, 0% 30%);
    offset-path: var(--offset-path);
    animation: motion 3s linear infinite;
}
.polygon{
    width: 40px; height: 43px;    
    position: absolute;
    --clip-path: polygon(30% 0%, 70% 0%, 100% 50%, 30% 100%, 0% 70%, 0% 30%);
    -webkit-clip-path: var(--clip-path);
    clip-path: var(--clip-path);
    background-color: deepskyblue;
}

.round-run-area {
    width: 300px; height: 100px;    
    --offset-path: inset(20px 10% 2px round 40px / 10%);
    position: absolute;
    z-index: 1;
}
.round-run {
    offset-path: var(--offset-path);
    animation: motion 3s linear infinite;
}
.round-run-clip {
    width: 300px; height: 100px;
    background-color: deepskyblue;
    -webkit-clip-path: inset(20px 10% 2px round 40px / 10%);
    clip-path: inset(20px 10% 2px round 40px / 10%);
}

.ellipse-run-area {
    width: 300px; height: 100px;    
    --offset-path: ellipse(40% 30px at 100px 40%);
    position: absolute;
    z-index: 1;
}
.ellipse-run {
    offset-path: var(--offset-path);
    animation: motion 3s linear infinite;
}
.ellipse-run-clip {
    width: 300px; height: 100px;
    background-color: deepskyblue;
    -webkit-clip-path: ellipse(40% 30px at 100px 40%);
    clip-path: ellipse(40% 30px at 100px 40%);
}

@keyframes motion {
    0% { offset-distance: 0%;}
    100% { offset-distance: 100%;}
}

HTML代码：

<h4>url(#road)测试</h4>
<img src="/study/201702/horse.png" class="horse-run" is-offset-path>
<svg width="280" height="150" viewBox="0 0 280 150">
    <path id="road" d="M10,80 q100,120 120,20 q140,-50 160,0" stroke="#cd0000" stroke-width="2" fill="none" />
</svg>

<h4>inset(20px 10% 2px round 40px / 10%)</h4>

<div class="round-run-area" is-offset-path><img src="/study/201702/horse.png" class="round-run"></div><div class="round-run-clip"></div>


<h4>circle(40%)</h4>
<div class="circle" is-offset-path>
    <img src="/study/201702/horse.png" class="circle-run">
</div>

<h4>ellipse(40% 30px at 100px 40%)</h4>
<div class="ellipse-run-area" is-offset-path><img src="/study/201702/horse.png" class="ellipse-run"></div><div class="ellipse-run-clip"></div>

<h4>polygon()测试</h4>
<div class="polygon"></div>
<img src="/study/201702/horse.png" class="horse-polygon" is-offset-path> 
                

JS代码：

<script src="offset-path.js"></script>