CSS

Question

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

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

Fiddle: 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;
}

Answer 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;
}

CSS - 绝对定位 SVG (IE)

CSS - absolute positioning SVG (IE)

svg

position