html - 如何使用 Css 定位 SVG 加载器？

Question

我在 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;
        }

请帮助并提前致谢!

Answer 1

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

<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 样式:

1. 在 HTML 文档中嵌入 SVG。如果你没关系
   在生成页面或只是复制粘贴时通过服务器端插入它它在文档中，它必须是内联的。

2. 将 SVG 作为对象元素加载，这样您就不必将其插入 HTML 中，但您必须使用从 SVG 文件内部加载的单独外部样式表。

   <

使用外部样式表

方法 1 的示例: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/