Встроенный SVG внутри контейнера flex div (может иметь размер в процентах) - PullRequest
Новая
       24

Встроенный SVG внутри контейнера flex div (может иметь размер в процентах)

0 голосов
/ 02 апреля 2019

У меня есть три гибких столбца, каждый из которых имеет относительный размер к самой странице (ширина 7%, высота 60%). Каждый столбец содержит три элемента flex (116px x 140px) с justify-content: space -ween; выровнять элементы: центр; так, чтобы они были в центре.

  1. Внутри каждого элемента flex есть SVG, содержащий изображение (116px x 140px), потому что я хочу применить некоторые фильтры к этим изображениям (среди прочего).

Я хочу, чтобы вся страница реагировала - не только на гибкие столбцы, но и на SVG. Я попытался установить эти SVG с шириной и высотой 100% соответственно и (очевидно) не сработало. Я знаю, что я должен использовать viewBox. min-x и min-y будут 0 (без панорамирования / смещения), но какие значения ширины и высоты должны быть?

  1. У меня есть другой столбец - такого же размера, как и остальные (ширина 7%, высота 60%). Он содержит один SVG, внутри которого есть путь, по которому течет градиент. Как сделать этот SVG (путь) отзывчивым тоже? viewBox должен быть решением, но опять же: какие значения должны иметь ширина и высота? Я знаю, что их значения могут быть не в процентах, а в пикселях - опять же, контейнер столбцов имеет размеры в процентах.

Я не хочу использовать CSS для этого (из того, что я читал, неудобно использовать в этой ситуации, и я не хочу, чтобы мой код имел простой и чистый поток). Таким образом, все анимации SVG управляются с использованием Tweenmax.

1 Ответ

0 голосов
/ 02 апреля 2019

Это был мой оригинальный код (с использованием ширины и высоты 100% для SVG, что неправильно) 

: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>
...