javascript 多部分SVG Javascript

Posted 2021-05-03

function runSVGMeasurements(multiPartSVG) {
        var svgHeightPercent = $(window).width() / 1941;
        var sectionHeight = (multiPartSVG.parent()[0].getBoundingClientRect().height).toFixed(2) - 5;
        if( multiPartSVG.find('.top-part').length > 0 ) {
            var topPartHeight = (multiPartSVG.find('.top-part')[0].getBoundingClientRect().height).toFixed(2);
            var subtractFromBottom = 0;
        }else {
            var topPartHeight = 0;
            var subtractFromBottom = 3;
        }
        
        var bottomPartHeight = (multiPartSVG.find('.bottom-part')[0].getBoundingClientRect().height).toFixed(2);
        var middleHeight = (sectionHeight - topPartHeight - bottomPartHeight) / svgHeightPercent
        multiPartSVG.find('.middle-part').attr('height', middleHeight);
        var bottomTranslate = (sectionHeight - bottomPartHeight - subtractFromBottom - 3) / svgHeightPercent;
        // console.log("Section Height: ", sectionHeight);
        // console.log("Top Part Height: ", topPartHeight);
        // console.log("Bottom Part Height: ", bottomPartHeight);
        // console.log("Middle Part Height: ", middleHeight);
        // console.log("Bottom Translate: ", bottomTranslate);
        multiPartSVG.find('.bottom-part').css('transform', 'translateY(' + bottomTranslate + 'px)');
        // Set transform attribute for IE11
        var transform= getComputedStyle(multiPartSVG.find('.bottom-part')[0]).getPropertyValue('transform');
        multiPartSVG.find('.bottom-part')[0].setAttribute('transform', transform);
    }
    
    $('.multipart-svg').each(function() {
        var multiPartSVG = $(this);
        if( $(this).parent().find('img').length > 0 ) {
            $(this).parent().find('img').load(function() {
                runSVGMeasurements(multiPartSVG);
            });
        }else {
            setTimeout(function() {
                runSVGMeasurements(multiPartSVG);
            }, 1500);
        }
    });