缩放和居中任何 svg 元素全视口

Question

很抱歉我是第 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 技术的组合。 None 我“用谷歌搜索”的方法似乎有效。

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

旁白可能重要也可能不重要：我正在使用 Python svgwrite 包，它有自己的一套缩放、平移、旋转的方法......但是 [= 中的 36=] 这些 似乎也适合我。

Answer 1

您必须添加一个 viewBox，否则您将无法缩放它。

Including an ‘svg’ element inside SVG content creates a new SVG viewport into which all contained graphics are drawn; this implicitly establishes both a new viewport coordinate system and a new user coordinate system. Additionally, there is a new meaning for percentage units therein, because a new SVG viewport has been established.

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>

缩放和居中任何 svg 元素全视口

Scale and center any svg element full-viewport

css

python

svg

svgwrite