理解 offset-anchor 属性
<style>.pa {
width: 800px;
height: 400px;
border: thin solid gray;
background: beige;
position: relative;
margin: auto;
}
.wrap p { margin: 12px 0; }
.son {
width: 100px;
height: 100px;
background: rgba(0, 100, 100, .6);
offset-path: path('M0 200 H800');
offset-distance: 0%;
position: absolute;
}
.tMid { text-align: center; }
.tRed { color: red; }
svg { position: absolute; }
</style>
<h1 class="tMid">offset-anchor 演示</h1>
<div class="pa">
<svg width="100%" height="100%" viewBox="0 0 800 400">
<path d="M 0 200 H 800" fill="none" stroke="red" />
</svg>
<div class="son"></div>
</div>
<div class="wrap">
<p>
<label>offset-distance ：</label>
<input type="range" value="0" oninput="setOffsetDistance(this.value)" />
<output id="od">0%</output>
</p>
<p><label>offset-anchor: </label> <output id="anchorRes" class="tRed">center;</output></p>
<blockquote>
<input type="radio" id="r1" name="anchor" value="center" checked onclick="setOffsetAnchor(this.value)" />
<label for="r1">center(默认)</label><br>
<input type="radio" id="r2" name="anchor" value="top" onclick="setOffsetAnchor(this.value)" />
<label for="r2">top</label><br>
<input type="radio" id="r3" name="anchor" value="right" onclick="setOffsetAnchor(this.value)" />
<label for="r3">right</label><br>
<input type="radio" id="r4" name="anchor" value="bottom" onclick="setOffsetAnchor(this.value)" />
<label for="r4">bottom</label><br>
<input type="radio" id="r5" name="anchor" value="left" onclick="setOffsetAnchor(this.value)" />
<label for="r5">left</label><br>
<input type="radio" id="r6" name="anchor" value="top left" onclick="setOffsetAnchor(this.value)" />
<label for="r6">top left</label><br>
<input type="radio" id="r7" name="anchor" value="top right" onclick="setOffsetAnchor(this.value)" />
<label for="r7">top right</label><br>
<input type="radio" id="r8" name="anchor" value="bottom left" onclick="setOffsetAnchor(this.value)" />
<label for="r8">bottom left</label><br>
<input type="radio" id="r9" name="anchor" value="bottom right" onclick="setOffsetAnchor(this.value)" />
<label for="r9">bottom right</label><br>
<input type="radio" id="r10" name="anchor" value="20% 20%" onclick="setOffsetAnchor(this.value)" />
<label for="r10">20% 20%</label><br>
<input type="radio" id="r11" name="anchor" value="70% 90%" onclick="setOffsetAnchor(this.value)" />
<label for="r11">70% 90%</label>
</blockquote>
</div>
<script>
const son = document.querySelector('.son');
function setOffsetAnchor(val) {
anchorRes.value = val + ';';
son.style.setProperty('offset-anchor', val);
}
function setOffsetDistance(val) {
od.value = val + '%';
son.style.setProperty('offset-distance', val + '%');
}
</script> offset-anchor 属性是 CSS Motion Path 模块的一部分，它用于指定一个元素在沿着路径（由 offset-path 定义）移动时，其自身的哪个点应该锚定在路径上。
简单来说，当一个元素沿着一条路径（比如一个圆或一条自定义的 SVG 路径）移动时，你可能不希望元素的中心点始终位于路径上。offset-anchor 允许你选择元素内部的一个点（例如，左上角、右下角或自定义百分比位置）作为“锚”，让这个锚点紧贴着路径移动。 理解 offset-anchor 属性，好好学习。{:4_204:} 谢谢黑黑辛苦，中午嚎！{:4_187:} 这个用图示的方式进行讲解，特别清晰，能亲眼看到 offset-anchor 属性对应的位置。
谢谢黑黑的细致讲解{:4_187:} 梦江南 发表于 2026-8-9 12:47
理解 offset-anchor 属性，好好学习。
如果需要用到 offset-path 路径，这个 offset-anchor 属性有用 梦江南 发表于 2026-8-9 12:48
谢谢黑黑辛苦，中午嚎！
你嚎你嚎 红影 发表于 2026-8-9 14:40
这个用图示的方式进行讲解，特别清晰，能亲眼看到 offset-anchor 属性对应的位置。
谢谢黑黑的细致讲解{:4 ...
{:4_190:} 马黑黑 发表于 2026-8-10 08:33
如果需要用到 offset-path 路径，这个 offset-anchor 属性有用
好，用时再好好研究。{:4_204:} 马黑黑 发表于 2026-8-10 08:33
你嚎你嚎
黑黑老师新周嚎！{:4_171:} 梦江南 发表于 2026-8-10 09:05
黑黑老师新周嚎！
新旧都嚎 梦江南 发表于 2026-8-10 09:04
好，用时再好好研究。
{:4_191:} 马老师晚上好~~
我若用这个形式制作一个帖子，会命名为“不忘初心“，很漂亮，赞佩~~我先抱走了。
感谢您的分享，夏祺！{:4_204:}{:4_190:}
很实用的知识点，谢谢马老师直观演示offset-anchor 属性{:4_190:} 杨帆 发表于 2026-8-12 19:31
很实用的知识点，谢谢马老师直观演示offset-anchor 属性
{:4_191:} 霜染枫丹 发表于 2026-8-10 20:48
马老师晚上好~~
我若用这个形式制作一个帖子，会命名为“不忘初心“，很漂亮，赞佩~~我先抱走了。
{:4_191:}
页:
[1]