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

【问题标题】：CSS: Load SVG and position relative to its elementsCSS：加载SVG并相对于其元素定位
【发布时间】：2021-01-15 10:49:48
【问题描述】：

本着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 访问。这个可以吗？

【问题讨论】：

标签： html css svg css-position background-image

【解决方案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，请考虑使用第 3 方库（如 jQuery）或直接从 <circle> 元素读取 cx 和 cy 属性。

【讨论】：