Inline SVG inside flex div container (which may have percentage size)

Question

I have three flex columns, each one with relative size to the page itself (width 7%, height 60%). Each column contains three flex items (116px x 140px) with justify-content: space-between; align-items: center;, so they are centered.

Inside each flex item is a SVG containing an image (116px x 140px) because I want to apply some filters to those images (among other things).

I want to have the whole page responsive - not just the flex columns but SVGs as well. I've tried to set those SVGs with width and height 100% respectively and (obviously) didn't work. I know I should use viewBox. min-x and min-y will be 0 (no pan/offset) but what values width and height should have?

I have another column - same size as the others (width 7%, height 60%). It contains a single SVG which has inside a path used to flow a gradient on it. How to make this SVG (path) responsive too? viewBox should be the solution but again: What values width and height should have? I know their values can't be percentages but pixels - again, the column container has percentage sizes.

I don't want to use CSS for that (from what I've read it's cumbersome to use in this situation and I wan't my code to have a simple and clean flow). So all SVG animations are managed using Tweenmax.

CaeIndru CaeIndru · Accepted Answer · 2019-04-02T08:08:27

This was my original code (using width and height 100% for SVGs, which is wrong)

:root {
    --flexColumnPosTop: 10%;
}

.flex-container {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
}

.flex-container-column {
    position: absolute;
    /* background-color: cyan; */
    top: calc(var(--flexColumnPosTop) * 2);       
    width: 7%;
    height: 60%;
}

.flex-container-column-posleft{
    left: var(--flexColumnPos); 
}

.divImagePNG {
    width: 116px;
    height: 110px;
}

<svg>
<defs>

<linearGradient id="linearGradient" x1="0" y1="0" x2="100%" y2="0" spreadMethod="pad" gradientUnits="userSpaceOnUse">
    <stop id="offset_start" offset="0" stop-color="rgb(249, 59, 120)" stop-opacity="1" />  
    <stop id="offset_mid" offset="0" stop-color="rgb(250, 250, 250)" stop-opacity="1" />
    <stop id="offset_end" offset="0" stop-color="rgb(116, 161, 230)" stop-opacity="1"/>
</linearGradient>

<path id="gradientPath" d="M20 70 h18 v85 h19" fill="none" stroke="rgb(116, 161, 230)" stroke-width="5" stroke-dasharray="122" stroke-dashoffset="0" />

<pattern id="patternImagePNG" patternUnits="userSpaceOnUse" width="116px" height="110px">
    <image id="imagePNG" preserveAspectRatio="none" href="image.png"  width="116px" height="110px"></image>
</pattern>

<rect id="rectImagePNG" x="0" y="0" width="116px" height="110px" fill="url(#patternImagePNG)" stroke-width="5" stroke="rgb(201, 28, 240)"
    stroke-dasharray="452" stroke-dashoffset="0" fill-opacity="1" /> 
</defs>
</svg>

<div class="flex-container flex-container-column flex-container-column-posleft">
    <div class="divImagePNG">
        <svg width="100%" height="100%"> 
            <use href="#rectImagePNG"></use>
        </svg>
    </div>

    <div class="divImagePNG">
        <svg width="100%" height="100%"> 
            <use href="#rectImagePNG"></use>
        </svg>
    </div>

    <div class="divImagePNG">
        <svg width="100%" height="100%"> 
            <use href="#rectImagePNG"></use>
        </svg>
    </div>
</div>


<div class="flex-container flex-container-column flex-container-column-pospathleft">
    <svg width="100%" height="100%">
        <use href="#gradientPath"></use>      
    </svg>
</div>

Inline SVG inside flex div container (which may have percentage size)

1 Answers