css - 如何定位来自 SVG 的 <use> 的 SVG 图像

Question

我有一个 SVG，它是一种包含 12 个字符的合影。 SVG 还包含这些 Angular 色在合影中的位置。每个字符都有一个 id .现在使用 SVG 的 <use> 我想在页面的另一部分重复使用这些单个字符。

像这样:

请注意上图左下方显示的头部。如您所见，定位不起作用。我已经尝试设置 top , left , position: absolute , translate(0, 0) -- 但没有成功。

实际上它应该是这样的:

我设置了一个 codepen在哪里可以看到问题。有什么想法可以让它发挥作用吗？

Answer 1

添加这个样式

.st-infobox__img svg use {
    transform:  translate(-300px, -100px);
}

corrected codepen