Как масштабировать мои SVG внутренние элементы, чтобы соответствовать окну по ширине и высоте - PullRequest
Новая
       14

Как масштабировать мои SVG внутренние элементы, чтобы соответствовать окну по ширине и высоте

0 голосов
/ 07 июля 2019

пожалуйста, проверьте эту демонстрацию.

https://codepen.io/wasiabbas/pen/JQmXmE

когда фигурные скобки, если они идут слева, мне нужно подогнать их по высоте, а когда они вращаются, тогда мне нужно установить фигурные скобкив ширину окна.как я могу это сделать? 

var winWidth = window.innerWidth,
        winHeight = window.innerHeight;

    const bracesContainer = document.querySelector('.braces-container');
    const braces = document.getElementById('braces');
    const bracesbg = document.getElementById('bracesbg');
    const leftbraces = document.getElementById('leftcb');
    const topbraces = document.getElementById('topcb');

    function loadAnimation(){

        $(braces).css({
            backgroundColor: "#000",
            width: winWidth,
            height: winHeight
        });

        TweenMax.to(braces, 0.9, {
            right:0
        });

        TweenMax.to(leftbraces, 0.9, {
            opacity: 0,
            rotation: -90,
            y: '60%',
            x: '10%',
            transformOrigin: 'center center',
            delay: .5
        });


        TweenMax.to(topbraces, 1.2, {
            opacity:1,
            delay: 1
        });

    }

    $(document).ready(function(){
        loadAnimation();
    });

1 Ответ

0 голосов
/ 07 июля 2019

Вот фрагмент с простым решением (с использованием D3.js): 

const svg = d3.select('svg');
const width = parseInt(svg.attr('width'));
const height = parseInt(svg.attr('height'));

svg.select('path')
	.transition()
    .delay(500)
	.duration(1000)
	.attr('transform', `translate(0, ${width}) rotate(-90) scale(${width/height})`)
svg {
	background-color: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

<svg width='250' height='200'>
<path d='M 0,0 H 100 Q 125,0 125,25 V 75 Q 125,100 150,100 
Q 125,100 125,125 V 175 Q 125,200 100,200 H 0 z' fill='#fff' />
</svg>
...