SVG Animation изменяет размер, чтобы оставаться в области просмотра и придерживаться сгиба - PullRequest
Новая
       11

SVG Animation изменяет размер, чтобы оставаться в области просмотра и придерживаться сгиба

0 голосов
/ 20 марта 2019

У меня есть SVG, который я пытаюсь уменьшить в окне просмотра окна. При этом также застрял в нижней папке окна.

В настоящее время, если вы уменьшите ширину окна, SVG тоже изменит размер, но при сохранении соотношения сторон высота svg будет уменьшаться, чего я не хочу. Я всегда хочу, чтобы высота SVG была 100vh.

Я пытался изменить AspectRatio preserveAspectRatio:'xMidYMin slice'

Он сохраняет свой размер, но затем обрезается по ширине при изменении размера браузера.

Мой SVG; 

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2489 1800" width="2489" height="1800" preserveAspectRatio="xMidYMin slice" style="width: 100%; height: 100%; transform: translate3d(0px, 0px, 0px);">
    <defs>
        <clipPath id="animationMask_oMFKjCmaS2">
            <rect width="2489" height="1800" x="0" y="0"></rect>
        </clipPath>
        <clipPath id="cp_MJBYT3Jk">
            <path d="M0,0 L1600,0 L1600,900 L0,900z"></path>
        </clipPath>
        <clipPath id="cp_3iMIjxYs">
            <path d="M0,0 L1600,0 L1600,900 L0,900z"></path>
        </clipPath>
        <clipPath id="cp_LphEsRvd">
            <path d="M0,0 L1600,0 L1600,900 L0,900z"></path>
        </clipPath>
    </defs>
    <g clip-path="url(#animationMask_oMFKjCmaS2)">
        <g clip-path="url(#cp_LphEsRvd)" transform="matrix(1.551110029220581,0,0,1.551110029220581,1.6119384765625,10.00048828125)" opacity="1" style="display: block;">
            <g transform="matrix(1,0,0,1,848,450)" opacity="1" style="display: block;">
                <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                    <path fill="rgb(68,187,221)" fill-opacity="1" d=" M720,-422 C720,-422 584,-422 584,-422 C584,-422 -560,548 -560,548 C-560,548 -560,788 -560,788 C-560,788 720,-296 720,-296 C720,-296 720,-422 720,-422z"></path>
                    <path stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4" stroke="rgb(255,255,255)" stroke-opacity="1" stroke-width="0" d=" M720,-422 C720,-422 584,-422 584,-422 C584,-422 -560,548 -560,548 C-560,548 -560,788 -560,788 C-560,788 720,-296 720,-296 C720,-296 720,-422 720,-422z"></path>
                </g>
                <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                    <path fill="rgb(68,187,221)" fill-opacity="1" d="M0 0"></path>
                    <path stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4" stroke="rgb(255,255,255)" stroke-opacity="1" stroke-width="0" d="M0 0"></path>
                </g>
            </g>
        </g>
        <g clip-path="url(#cp_3iMIjxYs)" transform="matrix(1.551110029220581,0,0,1.551110029220581,-0.1380615234375,11.75048828125)" opacity="1" style="display: block;">
            <g transform="matrix(0.4881500005722046,0,0,0.4881500005722046,980,560)" opacity="1" style="display: block;">
                <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                    <path fill="rgb(255,106,30)" fill-opacity="1" d=" M720,-422 C720,-422 584,-422 584,-422 C584,-422 -990.1939697265625,945.4180297851562 -990.1939697265625,945.4180297851562 C-990.1939697265625,945.4180297851562 -990.1939697265625,1185.4169921875 -990.1939697265625,1185.4169921875 C-990.1939697265625,1185.4169921875 720,-296 720,-296 C720,-296 720,-422 720,-422z"></path>
                    <path stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4" stroke="rgb(255,255,255)" stroke-opacity="1" stroke-width="0" d=" M720,-422 C720,-422 584,-422 584,-422 C584,-422 -990.1939697265625,945.4180297851562 -990.1939697265625,945.4180297851562 C-990.1939697265625,945.4180297851562 -990.1939697265625,1185.4169921875 -990.1939697265625,1185.4169921875 C-990.1939697265625,1185.4169921875 720,-296 720,-296 C720,-296 720,-422 720,-422z"></path>
                </g>
                <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                    <path fill="rgb(68,187,221)" fill-opacity="1" d="M0 0"></path>
                    <path stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4" stroke="rgb(255,255,255)" stroke-opacity="1" stroke-width="0" d="M0 0"></path>
                </g>
            </g>
            <g transform="matrix(1,0,0,1,800,450)" opacity="1" style="display: block;">
                <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                    <path fill="rgb(237,100,30)" fill-opacity="1" d=" M530.5,-96 C530.5,-96 462.5,-95.5 462.5,-95.5 C462.5,-95.5 -318,584 -318,584 C-318,584 -320,644 -320,644 C-320,644 530.5,-96 530.5,-96z"></path>
                    <path stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4" stroke="rgb(255,255,255)" stroke-opacity="1" stroke-width="0" d=" M530.5,-96 C530.5,-96 462.5,-95.5 462.5,-95.5 C462.5,-95.5 -318,584 -318,584 C-318,584 -320,644 -320,644 C-320,644 530.5,-96 530.5,-96z"></path>
                </g>
            </g>
        </g>
        <g clip-path="url(#cp_MJBYT3Jk)" transform="matrix(1.551110029220581,0,0,1.551110029220581,-4.1380615234375,10.75048828125)" opacity="1" style="display: block;">
            <g transform="matrix(0.39351001381874084,0,0,0.39351001381874084,586,674)" opacity="1" style="display: block;">
                <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                    <path fill="rgb(255,93,184)" fill-opacity="1" d=" M720,-422 C720,-422 584,-422 584,-422 C584,-422 -990.1939697265625,945.4180297851562 -990.1939697265625,945.4180297851562 C-990.1939697265625,945.4180297851562 -990.1939697265625,1185.4169921875 -990.1939697265625,1185.4169921875 C-990.1939697265625,1185.4169921875 720,-296 720,-296 C720,-296 720,-422 720,-422z"></path>
                    <path stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4" stroke="rgb(255,255,255)" stroke-opacity="1" stroke-width="0" d=" M720,-422 C720,-422 584,-422 584,-422 C584,-422 -990.1939697265625,945.4180297851562 -990.1939697265625,945.4180297851562 C-990.1939697265625,945.4180297851562 -990.1939697265625,1185.4169921875 -990.1939697265625,1185.4169921875 C-990.1939697265625,1185.4169921875 720,-296 720,-296 C720,-296 720,-422 720,-422z"></path>
                </g>
                <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                    <path fill="rgb(255,93,184)" fill-opacity="1" d="M0 0"></path>
                    <path stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4" stroke="rgb(255,255,255)" stroke-opacity="1" stroke-width="0" d="M0 0"></path>
                </g>
            </g>
            <g transform="matrix(0.7595199942588806,0,0,0.7595199942588806,464,582)" opacity="1" style="display: block;">
                <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                    <path fill="rgb(236,83,169)" fill-opacity="1" d=" M530.5,-96 C530.5,-96 462.5,-95.5 462.5,-95.5 C462.5,-95.5 -318,584 -318,584 C-318,584 -320,644 -320,644 C-320,644 530.5,-96 530.5,-96z"></path>
                    <path stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4" stroke="rgb(255,255,255)" stroke-opacity="1" stroke-width="0" d=" M530.5,-96 C530.5,-96 462.5,-95.5 462.5,-95.5 C462.5,-95.5 -318,584 -318,584 C-318,584 -320,644 -320,644 C-320,644 530.5,-96 530.5,-96z"></path>
                </g>
            </g>
        </g>
    </g>
</svg>

Пример CodePen - https://codepen.io/SamXronn/pen/MxvPER

...