Question

我有一个SVG，我希望保持固定的高度/宽度（560px x 275px），同时也被多边形剪裁蒙版修剪。

出于某种原因，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;
    }

Answer 1

将kanye id的位置设为fixed。并在html中将preserveAspectRatio元素的svg属性设置为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">

编辑：

要使其与绿色四元组的左上角对齐，只需position:fixed的特定kanye，并删除top:0和left:0属性。您还需要停用preserveAspectRatio

像这里：http://jsfiddle.net/P5ggG/

Answer 2

我明白了：只要杀死viewbox

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

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

2 个答案: