SVG技术问询:如何让Circle与嵌入PNG中心重合?x/cx、y/cy可否用同单位?
SVG中circle与image的单位兼容性及中心对齐方法
单位兼容性结论
完全可以给cx/cy(circle的圆心坐标)和x/y(image的左上角坐标)使用相同单位(比如pt)。SVG的所有长度属性都遵循统一的单位规范,包括pt、px、mm、em等,渲染时会自动转换为当前SVG的用户坐标系(由viewBox定义),不会出现单位不兼容的问题。
中心对齐的关键:定位逻辑差异
你代码里cy(455.9pt)和y(385.6pt)数值不同,不是单位问题,而是两者的定位基准不同:
circle的cx/cy是圆心的坐标image的x/y是左上角的坐标
要让两者中心完全重合,需要根据image的实际宽高计算位置:
image.x = circle.cx - (image.width / 2) image.y = circle.cy - (image.height / 2)
从你的代码看,circle的半径r=74.34,推测你的PNG图标宽高约为148.68pt(半径的2倍),那么正确的image坐标应该是:
x = 131.31pt - 148.68pt/2 = 56.97pt y = 455.9pt -148.68pt/2 = 381.56pt
修正后的代码示例
<?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坐标,单位与circle一致使用pt --> <image x="56.97pt" y="381.56pt" width="148.68pt" height="148.68pt" xlink:href="data:image/png;base64,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" /> </svg>
注:添加了
width和height属性明确image尺寸,避免浏览器自动缩放导致对齐偏差。
内容的提问来源于stack exchange,提问作者anon
相关产品推荐
相关产品推荐

