CSS：加载 SVG 并相对于其元素定位

Question

本着http://www.csszengarden.com/的精神，我想看看在这种情况下我能用 css 走多远。

我得到一个 html 页面，其中包含以下列表，我可以设置样式但是我想使用 css 文件，但不能修改。项目的文本是事先不知道的。

<ul>
    <li id="item1">You</li>
    <li id="item2">Can</li>
    <li id="item3">Call</li>
    <li id="item4">Me</li>
    <li id="item5">Al</li>
</ul>

我还有这个单独的 SVG 文件 (view in jsfiddle):

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 800 600" enable-background="new 0 0 800 600" xml:space="preserve">
<path fill="none" stroke="#000000" stroke-width="22" stroke-miterlimit="10" d="M64.5,381.5c232-235,365-321,335-152
    s-152,145-101,1s265-105,241-5s-68,342-159,258s142-211,164-70s191-83,191-83"/>
<circle id="circle1" fill="#FFFFFF" stroke="#FF0000" stroke-width="22" stroke-miterlimit="10" cx="131" cy="323" r="23"/>
<circle id="circle2" fill="#FFFFFF" stroke="#FF0000" stroke-width="22" stroke-miterlimit="10" cx="290" cy="288" r="23"/>
<circle id="circle3" fill="#FFFFFF" stroke="#FF0000" stroke-width="22" stroke-miterlimit="10" cx="528" cy="272" r="23"/>
<circle id="circle4" fill="#FFFFFF" stroke="#FF0000" stroke-width="22" stroke-miterlimit="10" cx="383" cy="487" r="23"/>
<circle id="circle5" fill="#FFFFFF" stroke="#FF0000" stroke-width="22" stroke-miterlimit="10" cx="698" cy="375" r="23"/>
</svg>

在我的 CSS 文件中，我想加载 SVG 并像这样设置列表样式： each text on a circle

基本上，定位#item1相对于#circle1，#item2相对于#circle2等等（真正相对的，没有对项目位置进行硬编码）。

我还没有找到既能加载 SVG 又能仅通过 CSS 访问其元素的方法。这能做到吗？

Answer 1

遗憾的是，CSS 不允许引用动态属性，例如不相关元素的位置。

您可以通过 JavaScript 实现：

首先，check the relative position of each circle

const circle1 = document.querySelector('#circle1');
const { offsetLeft, offsetTop } = circle1;

然后，将这些坐标设置为这些偏移量的 top 和 left 值：

const label1 = document.querySelector('#item1');
label1.style.position = 'absolute';
label1.style.left = `${offsetLeft}px`;
label1.style.top = `${offsetTop}px`;

如果获取偏移量不适用于纯 JS 和您的 SVG，请考虑使用第三方库（如 jQuery）或读取 cx 和 cy 属性直接来自 <circle> 元素。

CSS：加载 SVG 并相对于其元素定位

CSS: Load SVG and position relative to its elements

html

css

svg

css-position

background-image