为什么这个 SVG 采用父级的高度？答案

【问题标题】：Why is this SVG adopting the height of the parent?为什么这个 SVG 采用父级的高度？
【发布时间】：2014-01-07 05:38:40
【问题描述】：

我有一个 SVG，我希望它保持在固定的高度/宽度（560 像素 x 275 像素），同时还被多边形剪切蒙版剪切。

由于某种原因，SVG 适应了它的父 div 的高度，并且不会完全向左对齐（如果你拉伸这个小提琴的窗口，你会看到它开始向右移动。）

我该怎么做：

确保 SVG 保持相同的高度
将其放在左上角

http://jsfiddle.net/#&togetherjs=onwz4D9y63

<div class="quad">
    <svg id="kanye" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 560 375">
        <g>
            <defs>
                <polygon id="SVGID_1_" points="0,0 0,1000 400,1000"/>
            </defs>

            <clipPath id="SVGID_2_">
                <use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
            </clipPath>

            <g id="LwhyVN.tif" style="clip-path:url(#SVGID_2_);">
                    <image style="overflow:visible;" width="560" height="375" xlink:href="http://nymag.com/daily/entertainment/upload/2010/08/what_did_it_cost_to_be_kanye_t/20100803_kanye_560x375.jpg">
                </image>
            </g>
        </g>
    </svg>
</div>

.quad {
            position: absolute;
            width: 50%;
            height: 50%;
            bottom: 0;
            right: 0;
            background-color: green;
        }

#kanye {
        position: absolute;
        left: 0;
        top: 0;
    }

【问题讨论】：

标签： css svg

【解决方案1】：

将kanye id 的位置设置为fixed。并在html中设置svg元素的preserveAspectRatio属性为none。

 <svg id="kanye" version="1.1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 200 200">

编辑：

要使其与绿色四边形 div 的左上角对齐，只需将 position:fixed 指定为 kanye 并删除 top:0 和 left:0 属性。您还需要禁用preserveAspectRatio

喜欢这里：http://jsfiddle.net/P5ggG/

【讨论】：

抱歉没有更清楚，我希望它与绿色 div 'quad 的左上角对齐
是的，完全正确。所以将 .quad 更改为固定并保持#kanye 绝对？
关键变化是从kanye中删除top:0和left:0。

【解决方案2】：

我想通了：干掉viewbox

它一直是一个讨厌的属性，应该尽可能避免

【讨论】：