移动 ViewBox X 无法按预期定位 SVG

Question

我的页面上有一个 SVG，它是视口的完整高度，并且比视口更宽。非常全景。我有一个 HTML 元素，在移动设备上位于我的页面中央，在桌面设备上则位于右侧 25%。 （我看到这个只是为了说明 viewBox 值不能静态设置）。

我正在尝试“平移”SVG（通过 viewBox），以便某个路径元素的中心与 HTML 元素的中心对齐。当仅修改

x

viewBox 属性时，效果非常好：

<svg viewBox="0 0 1000 240">/* svg code */</svg>

const SVG_INITIAL_VIEWBOX_HEIGHT = 240
const htmlElToCenterAgainst = document.querySelector('#centerAgainst')
const svgPathEl = document.querySelector('#path')

const svgPathElRect = svgPathEl.getBoundingClientRect()
const svgPathElCenter = svgPathElRect.left + svgPathElRect.width / 2

const htmlElToCenterAgainstRect = htmlElToCenterAgainst.getBoundingClientRect()
const htmlElToCenterAgainstCenter = htmlElToCenterAgainstRect.left + htmlElToCenterAgainstRect.width / 2

const viewportToSvgRatio = viewportHeight / SVG_INITIAL_VIEWBOX_HEIGHT // use the ratio of viewbox pixels to screen pixels to normalize calculations

const distanceToTargetCenter = svgPathElCenter - htmlElToCenterAgainstCenter

const viewBoxX = distanceToTargetCenter / viewportToSvgRatio

const viewBox = `${viewBoxX} 0 1000 ${SVG_INITIAL_VIEWBOX_HEIGHT}`

问题是当我尝试通过增加 viewBox 高度来实现缩放时。例如 0.5 倍的缩放：

const viewBox = `${viewBoxX} 0 1000 ${SVG_INITIAL_VIEWBOX_HEIGHT * 2}`

这会正确缩小 viewBox。当然，它的左边缘已向左移动，因为我的居中计算对于新的缩放级别不再有效。 SVG 路径现在位于我所居中的对象的左侧。

我可以将 SVG 路径的中心与页面左边缘对齐：

const svgPathCenterAtLeftEdge = ((svgPathElRect.x + (svgPathElRect.width / 2)) / viewportToSvgRatio)
const viewBox = `${svgPathCenterAtLeftEdge} 0 1000 ${SVG_INITIAL_VIEWBOX_HEIGHT * 2}`

我可以计算 HTML 元素的中心：

const htmlElCenter = htmlElToCenterAgainstRect.x + htmlElToCenterAgainstRect.width / 2

因此，要将 SVG 路径元素移动到与 HTML 元素对齐，似乎我应该将

htmlElCenter

添加到 viewBox 的

x

。这会将其向左移动长一段距离。

所以我觉得 SVG“viewBox 像素”和“屏幕像素”不是一回事。我听说它描述了使用 viewBox 定义了一个新的网格。所以也许我需要将其减少一半，因为这就是我使用 viewBox“放大”的方式。

const viewBox = `${svgPathCenterAtLeftEdge + (htmlElCenter / 2)} 0 1000 ${SVG_INITIAL_VIEWBOX_HEIGHT * 2}`

这将 SVG 平移到正确的方向，但还不够。

我尝试使用 viewBox“比例”和我上面计算的

x

来修改这个

viewportToSvgRatio

值。然而，似乎没有任何变化可以将 SVG 平移到与 HTML 元素对齐。我一定是缺少 viewBox 网格/像素定义的一部分。或者也许是 SVG 本身。

如何使用

viewBox

将此 SVG 元素与 HTML 元素对齐（当

viewBox

高度已修改时）？