我在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;
}
请提前帮助和谢谢！
答案 0 :(得分：0)
假设所有代码都在一个文件中（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。如果你这不重要 在生成页面或只是copypaste时通过服务器端插入它 它在文档中，必须是内联的。
将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/
在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>
我建议阅读这些文章，因为他们会更详细地解释所有这些