CSS - 绝对定位 SVG (IE)答案

【问题标题】：CSS - absolute positioning SVG (IE)CSS - 绝对定位 SVG (IE)
【发布时间】：2015-08-24 05:38:18
【问题描述】：

我尝试使用绝对位置定位到简单的 SVG 形状。它似乎在 Firefox、Google Chrome 中运行良好，但在 Internet Explorer 中运行不正常（我没有任何 Mac 可以在 safari 中测试......如果有人可以确认的话）。三角形底部 SVG 也有一个小问题，右侧不正确（显然缺少 1px）

出了什么问题，如何正确定位 SVG？

小提琴：http://fiddle.jshell.net/g5zqrdxx/3/

html:

<div class="container">

    <div class="triangle-top">
        <svg width="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 1 1">
            <polygon points="0,1 1,0 0,0" />
        </svg>
    </div>

    <div class="triangle-bottom">
        <svg width="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 1 1">
            <polygon points="1,1 1,0 0,1 1" />
        </svg>
    </div>

</div>

css:

.container {
    position: relative;
    display: block;
    height: 350px;
    width: 350px;
    background: #444444; 
}
.triangle-top {
    position: absolute;
    display: block;
    width: 20%;
    left: 0;
    top: 0;
}
.triangle-top svg {
    position: absolute;
    left: 0;
    top: 0;
    fill: red;
}
.triangle-bottom {
    position: absolute;
    display: block;
    width: 20%;
    right: 0;
    bottom: 0;
}
.triangle-bottom svg {
    position: absolute;
    right: 0;
    bottom: 0;
    fill: green;
}

【问题讨论】：

我没有 Mac 可以在 Safari 中测试你不需要 Mac 也可以使用 Safari :)
是的，但它不能解决 IE 的问题...
它在 Chrome 上运行良好。可以发张图片吗？
是的，我知道，但在 Internet Explorer 中没有
对于 IE，如果您查看控制台，您会看到：SVG 点列表格式不正确，无法完全解析。 所以你的有问题svg的？

标签： css svg position

【解决方案1】：

最后，我使用纯 css 的替代解决方案来获得相同的结果。

http://fiddle.jshell.net/g5zqrdxx/5/

HTML：

<div class="container">

    <div class="triangle-top">
        <div class="triangle-up-left" style="border-color:red"></div>
    </div>

    <div class="triangle-bottom">
        <div class="triangle-down-right" style="border-color:red"></div>
    </div>

</div>

CSS：

.container {
    position: relative;
    display: block;
    height: 350px;
    width: 350px;
    background: #444444; 
}
.triangle-top {
    position: absolute;
    display: block;
    width: 20%;
    left: 0;
    top: 0;
}
.triangle-bottom {
    position: absolute;
    display: block;
    width: 20%;
    right: 0;
    bottom: 0;
}
.triangle-up-left {
    width: 0;
    height: 0;
    padding-bottom: 100%;
    padding-left: 100%;
    overflow: hidden;
}
.triangle-up-left:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin-left: -500px;
    border-bottom: 500px solid transparent;
    border-left: 500px solid;
    border-left-color: inherit;
}
.triangle-down-right {
    width: 100%;
    height: 0;
    padding-top: 100%;
    overflow: hidden;
}
.triangle-down-right:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin-top:-500px;
    border-top: 500px solid transparent;
    border-right: 500px solid;
    border-right-color: inherit;
}

【讨论】：