SVG / SVGPan：加载时的中心图形

Question

我一直在使用嵌套的<svg/>和<g/>元素来在浏览器框架中居中显示SVG图形。外部svg元件的宽度和高度为100％，内部的x和y设定为50％。内部g元素具有半图像尺寸的负偏移。这工作正常但我现在想要添加平移和缩放功能。

嵌套的SVG方法似乎与SVGPan不兼容，这会让人感到困惑。

SVGPan仅在我从左上角的图形开始时才有效。我想我必须写一个在加载/加载SCG时运行的脚本，以便以与SVGPan兼容的方式添加转换以使顶层g居中。

如何使用矩阵转换初始化我的<g />？

((viewport.width - g.width)/2, (viewport.width - g.width)/2)

创建SVG时，视口的大小是未知的，但我可以在其中删除一些脚本来创建转换或转换。脚本应该在哪里生存，它应该做什么？它需要与SVGPan兼容。

Answer 1

Talos为我解决了这个问题，请参阅https://github.com/talos/jquery-svgpan/issues/3

而不是

<svg><svg><g></g></svg></svg>

我现在正在使用

<svg><g><svg></svg></g></svg>

允许居中的图形与[jquery-] svgpan一起使用。

Answer 2

在任何HTML元素中填充SVG元素：

1. 将position:relative（或position:absolute或position:fixed（如果适用）放在包装HTML元素上。
2. 将position:absolute放在SVG元素上（如有必要，请top:0; left:0; width:100%; height:100%）。

这样你的SVG元素将始终填充HTML元素。根据需要定位/大小/居中此元素。

将SVG内容置于SVG视口中心

1. 将SVG上的viewBox设置为以内容中心为中心 例如，如果您的内容是以175,300为中心的半径为30的圆，则设置为viewBox="145 270 60 60"。
2. 忽略SVG元素上的preserveAspectRatio属性，或确保它使用xMidYMid，以便视图框的中心始终位于SVG视口的中心。

平移和拖动您的SVG内容

相应地调整viewBox，否则转换元素。