如何将我的 svg 图像定位到浏览器的中心

Posted 2023-03-06

【中文标题】如何将我的 svg 图像定位到浏览器的中心

【英文标题】：How to position my svg image to the center of browser

【发布时间】：2019-12-08 10:52:38

【问题描述】：

我生成了一个简单的 svg 图像并将其加载到 Chrome。打算将它定位到浏览器的中心（即使在浏览器调整大小时），但到目前为止已经失败了。

参考了一些关于viewport/viewbox设置的文章，以及本站(https://***.com/questions/8639383/how-do-i-center-an-svg-in-a-div;https://***.com/questions/13373169/align-svg-to-center-of-screen)上的一些问答，但还没有完成。也许我错过了什么，因为我对此很陌生。

这是此 svg 图片的完整代码：

<svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   
   
   viewBox="0 -700 1080 1920"
   preserveAspectRatio="xMidYMid meet"
   version="1.1"
   id="mysvg"
>
  <g
    id="group" >
      <circle
       r="500"
       style="fill:#ffb721;fill-opacity:1"
       cy="0"
       cx="0"
       id="path" />

       <circle
       style="fill:#f71c17;fill-opacity:1;"
       id="path2"
       cx="0"
       cy="0"
       r="250" />
   </g>
</svg>

我希望这张图片可以保持在浏览器的中心，即使在浏览器调整大小时也是如此。

【问题讨论】：

你的意思是在页面上水平和垂直居中吗？

另外，您的圈子不在您的 viewBox 中居中。你是不是只想显示一半的圆圈。如果没有，请附上展示您想要实现的目标的样机图片。

Chrome 只需将文件拖入浏览器即可查看 SVG 文件的输出。如果您希望 SVG 加载到网页中，则必须在网页的 html 中专门调用它。即使这样，您也需要进行一些样式设置以使 SVG 居中。

@Paul：是的，我希望它们水平和垂直居中。我也想展示整个圈子，而不仅仅是一半。显示整个 svg 图像。

@Brad：我不是在尝试制作网页，而只是在拖入浏览器时可以在浏览器中居中的 svg 图像。当我说“加载到 Chrome”时，我的意思是把 svg 文件拖到浏览器中。

【参考方案1】：

我想这就是你想要的？ 即使浏览器调整大小和滚动，SVG 也会位于中心

关于全球 CSS

CSS：

#container 
top: 50%;
left: 50%;
position: fixed;
transform: translate(-50%, -50%);

内部 SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 439.29 439.29"  >
    <g id="group">
      <circle cx="219.64" cy="219.64" r="219.64" style="fill: #ffb721" id="path"/>
      <circle cx="219.64" cy="219.64" r="108.32" style="fill: #f71c17" id="path2"/>
    </g>
  </svg>

【讨论】：

感谢您的回答。我应该如何使用这个代码块？我尝试在 (id="mysvg"> ) 部分之后将此块添加到 svg 文件中，但它没有以这种方式工作。

将此添加到您的 css 文件中

@Abraham 我已编辑我的代码如果可行，请尝试该代码

对不起，我尝试使用单独的 css 文件加上 svg 文件修改来添加样式块，但仍然不适用于我的情况。您知道如何仅在一个 svg 文件中实现这一点吗？我想制作这个 svg 文件，而不是网页。谢谢。

@Abraham i edited 我的回答又是你想要什么？如果不是，您只能在 html 元素中调整 SVG 的位置

【参考方案2】：

您的 SVG 需要稍作修改才能在 ViewBox 中居中。

body 
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;


.container 
  width: 300px;
  height: 300px;
  background-color: rgba(red, .3);

<div class="container">
<svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   
   
   viewBox="-540 -960 1080 1920"
   preserveAspectRatio="xMidYMid meet"
   version="1.1"
   id="mysvg"
>
  <g
    id="group" >
      <circle
       r="500"
       style="fill:#ffb721;fill-opacity:1"
       cy="0"
       cx="0"
       id="path" />

       <circle
       style="fill:#f71c17;fill-opacity:1;"
       id="path2"
       cx="0"
       cy="0"
       r="250" />
   </g>
</svg>
</div>

【讨论】：

嗨，布拉德，我想说，如果仅针对我在问题 (1080 1920) 中列出的固定 viewBox 宽度和高度，您将 viewBox 原点修改为 (-540 -960) 就可以了按我预期的方式工作。你能告诉我如何正确计算这两个数字吗？但是，如果我更改 viewBox 尺寸，那么它就无法工作。关于 body 和 .container 部分，我不确定如何正确使用它们。我试图制作一个 html 文件并将它们放入，但它没有用。此外，我想制作一个 svg 文件，而不是网页。如何在单个 svg 图片文件中实现？