CODEWITHSUNDEEP
csssvg
Joe Isaacson
Joe Isaacson

Reputation: 4132

Why is this SVG adopting the height of the parent?

I have an SVG that I want to remain at a fixed height/width (560px x 275px) while also being clipped by a polygonal clipping mask.

For some reason, the SVG adapts to be the height of it's parent div, and will not align fully to the left (if you stretch the window of this fiddle, you will see that it starts to wander right.)

How do I:

  1. Make sure the SVG keeps the same height
  2. Position it to the top-left

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

Upvotes: 0

Views: 129

Answers (2)

sanjeev mk
sanjeev mk

Reputation: 4336

Set the position of kanye id to fixed. And set the preserveAspectRatio attribute of the svg element to none, in the html.

 <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">

Edit:

For it to be aligned to the top-left of the green quad div, just specific position:fixed for kanye and remove the top:0 and left:0 attributes. You'll also need to disable preserveAspectRatio

Like here: http://jsfiddle.net/P5ggG/

Upvotes: 1

Joe Isaacson
Joe Isaacson

Reputation: 4132

I figured it out: just kill the viewbox

it's always been a nasty attribute and should be avoided when possible

Upvotes: 0

Related Questions