【问题标题】：How Do I Position an SVG Loader With Css?如何使用 Css 定位 SVG 加载器？
【发布时间】：2014-06-11 17:19:45
【问题描述】：

我在 codepen 上找到了一个相当酷的 SVG 加载器，它可以工作，但我无法弄清楚如何将它放入屏幕中心。常规的 'ole Css 不起作用，所以我有点卡住了。

这是 SVG/HTML：

<svg width="300px" height="320px">
      <path class="tri1" d="M11.7 118L9.719 118 72.5 9.259 135.281 118z"></path>
      <path class="tri2" d="M12.2 118L9.719 118 54.602 40.259 99.486 118z"></path>
      <path class="tri3" d="M48.8 118L46.496 118 72.991 72.11 99.486 118z"></path>
    </svg>

这是最重要的 Css：

svg {
            vertical-align: bottom;
            display: inline-block;
        }

请提前帮助和感谢！

【问题讨论】：

如果你希望它出现在“屏幕中心”，为什么要使用vertical-align: bottom？您能否提供 JSFiddle 并更准确地描述您期望的效果？

标签： html css svg loader

【解决方案1】：

假设您的所有代码都在一个文件中（HTML 中的所有内容）并且您没有使用 img 或通过 background-image 加载 SVG，试试这个：

<style>
   #loadingSVG { position: absolute; top:50%; left:50%; }
</style>

<svg width="300px" height="320px" id="loadingSVG">
    <path class="tri1" d="M11.7 118L9.719 118 72.5 9.259 135.281 118z"></path>
    <path class="tri2" d="M12.2 118L9.719 118 54.602 40.259 99.486 118z"></path>
    <path class="tri3" d="M48.8 118L46.496 118 72.991 72.11 99.486 118z"></path>
</svg>

在这里查看：http://jsfiddle.net/993eL/

现在，抛开假设，如果您尝试将其加载为外部文件或想要使用外部样式表，则游戏会发生变化。如果你想使用外部样式表，基本上你有 2 个选项可以为你的 SVG 设置样式：

在 HTML 文档中嵌入 SVG。没关系
生成页面时通过服务器端插入它或只是复制粘贴它在文档中，它必须是内联的。
将 SVG 作为对象元素加载，因此您不必将其插入 HTML，但您必须使用从 SVG 文件内部加载的单独外部样式表。
李>

使用外部样式表

方法一示例：HTML 文档中的内嵌 SVG

在 HTML 文档中：

<svg ... id="Layer_1">
  <ellipse .../>
  <path .../>
</svg>

在您的样式表中：

/*Center the SVG element*/
/*Option 1: have the element with an specific width so you can
  use margin:0 auto;*/
#Layer_1 {
    width: 500px; 
    margin: 0 auto;
}

/*Option 2: move the element anywhere with absolute positioning.
Note: Remember it will be relative to the parent element as long as 
your parent element has position:relative set, else it will take
the body as a base for positioning*/
#Layer_1 {
    position: absolute;
    top: 50%;
    left: 50%;
}

查看完整代码：http://jsfiddle.net/Sg2Z5/

方法2示例：将SVG作为对象加载

在您的 SVG 文件中，将外部样式表导入为 XML 样式表（记住 SVG 是基于 XML 的）：

<?xml-stylesheet type="text/css" href="stylesheet.css" ?>
<svg xmlns="http://www.w3.org/2000/svg">

在您的 HTML 中，将 SVG 作为 XML 对象加载：

<object type="image/svg+xml" data="YOUR-SVG-FILE.svg">
    <!-- Put your fallback here -->
</object>

参考资料和推荐读物

我建议阅读这些文章，因为它们更详细地解释了所有这些

使用 SVG http://css-tricks.com/using-svg/
SVG 样式http://blogs.adobe.com/webplatform/2013/01/08/svg-styling/
如何使用 CSS http://www.sitepoint.com/svg-styling-with-css/ 设置可缩放矢量图形的样式

【讨论】：