如何定位来自 SVG <use> 的 SVG 图像
How to position SVG image coming from SVG's <use>
我有一个 SVG，它是一种包含 12 个字符的合影。 SVG 还包含这些角色在合影中的位置。每个字符都有一个 id。现在使用 SVG 的 <use> 我想在页面的另一部分重复使用这些单个字符。
像这样：
注意上图左下方显示的头部。如您所见，定位不起作用。我已经尝试设置 top、left、position: absolute、translate(0, 0)——但没有成功。
实际上它应该是这样的：
我已经设置了一个 codepen 供您查看问题。有什么想法让这个工作吗？
添加此样式
.st-infobox__img svg use {
transform: translate(-300px, -100px);
}
我有一个 SVG，它是一种包含 12 个字符的合影。 SVG 还包含这些角色在合影中的位置。每个字符都有一个 id。现在使用 SVG 的 <use> 我想在页面的另一部分重复使用这些单个字符。
像这样：
注意上图左下方显示的头部。如您所见，定位不起作用。我已经尝试设置 top、left、position: absolute、translate(0, 0)——但没有成功。
实际上它应该是这样的：
我已经设置了一个 codepen 供您查看问题。有什么想法让这个工作吗？
添加此样式
.st-infobox__img svg use {
transform: translate(-300px, -100px);
}