SVG/SVGPan:加载时将图形居中

SVG / SVGPan: center graphic upon loading

本文关键字：图形 加载 SVGPan SVG      更新时间：2023-09-26

我一直在使用嵌套的<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兼容。

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

代替

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

我现在正在使用

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

并且这允许一个居中的图形与[jquery-]svgpan一起工作。

要在任何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，或者变换元素。

相关文章：