css-offset-polyfill

Polyfill CSS offset-path属性中的circle()、ellipse()、inset()、polygon()函数。

借助CSS自定义属性让浏览器无法识别的语法也能够正常保留，这样就能够对这些不支持的语法进行解析与支持。

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

<img src="horse.png" class="horse-run" is-offset-path>

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

页面中的SVG元素代码如下：

<svg width="280" height="150" viewBox="0 0 280 150">
 <path id="road" d="M10,80 q100,120 120,20 q140,-50 160,0"/>
</svg>

MIT

张鑫旭/css-offset-polyfill