0

我很抱歉成为n第一个提出这个问题的人。我已经窥探了一堆，还没有破解它。

我希望能够将“任何”svg 缩放到视口的全尺寸，居中。

例如，考虑以下 svg 元素：

    <svg baseProfile="full" height="100%" version="1.1" width="100%"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:ev="http://www.w3.org/2001/xml-events"
     xmlns:xlink="http://www.w3.org/1999/xlink"><defs />
      <polygon fill="blue" points="0,0 10,0 10,10 0,10" />
    </svg>

我只想将其居中并放大，直到它填满整个浏览器的视口。最终结果应该是一个蓝色的大方块。由于大多数显示器的宽度大于高度，因此它应该居中并垂直填充浏览器......你知道，就像 9 英寸，而不是 2 毫米 ;-)

理想情况下，我还希望能够拥有负坐标并拥有所有“刚刚处理”的东西（例如：中心！最大化！thnx！）

我尝试了 CSS 技术的组合。我“用谷歌搜索”的方法似乎都不起作用。

我觉得“点”是像素，因此“全屏”仍然意味着 10x10 像素。也许这是错误的解释。

一个可能或可能无关紧要的旁白：我正在使用 Python svgwrite包，它有自己的一组缩放、翻译、旋转的方法......但这些似乎都不适合我。

4

1 回答 1

0

您必须添加一个 viewBox，否则您将无法对其进行缩放。

在 SVG 内容中包含一个 'svg' 元素会创建一个新的 SVG 视口，所有包含的图形都将在其中绘制；这隐含地建立了一个新的视口坐标系和一个新的用户坐标系。此外，其中的百分比单位有了新的含义，因为已经建立了新的 SVG 视口。

https://www.w3.org/TR/SVG2/coords.html#EstablishingANewSVGViewport

svg {
  position: absolute;
  width: 100%;
  height: 100%;
}
<svg baseProfile="full" version="1.1" viewBox="0 0 10 10"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:ev="http://www.w3.org/2001/xml-events"
     xmlns:xlink="http://www.w3.org/1999/xlink"><defs />
      <polygon fill="blue" points="0,0 10,0 10,10 0,10" />
    </svg>

于 2022-02-20T22:23:37.573 回答