在SVG中，我试图绘制一个以嵌入的png图标的相同位置为中心的圆。
svg圆的定位具有cx和cy属性使用x和y属性定位图像
这些值，x和cx，y和cy，可以用同一个单位来表达吗，比如pt？
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"[]>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="594.75pt" height="841.5pt" viewBox="0 0 594.75 841.5">
<circle stroke="blue" stroke-width="3" cx="131.31pt" cy="455.9pt" r="74.34" fill-opacity="0.1" />
<image x="131.31pt" y="385.6pt" xlink:href="data:image/png;base64,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" />
</svg>
提前谢谢。
由于svg元素的宽度和高度以pts为单位，并且您有一个viewBoxwidth="594.75pt" height="841.5pt" viewBox="0 0 594.75 841.5"，因此您可以使用用户单位(无单位(，svg元素中的所有内容都将以pts表示。用户单位是当前用户坐标系中的单位。
为了使图像位于圆的中心，您需要将其放置在x=cx-12和y=cy-12，其中cx和cy是圆的中心的坐标，12=24/2；24表示图像的宽度和高度。
为了知道图像的宽度和高度，可以使用getBBox((方法。
console.log(img.getBBox())<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="594.75pt" height="841.5pt" viewBox="0 0 594.75 841.5">
<circle stroke="blue" stroke-width="3" cx="131.31" cy="455.9" r="74.34" fill-opacity=".1" />
<image id="img" x="119.31" y="443.9" xlink:href="data:image/png;base64,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" />
</svg>