html - 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，请考虑使用 3rd 方库(如 jQuery)或阅读 cx和 cy属性直接来自 <circle>元素。