结合使用多个matchMedia()和SVG来调整ViewBox的大小 [英] Use multiple matchMedia() with SVG for responsive viewBox resizing

问题描述

我正在尝试使用matchMedia() JavaScript Web API在SVG上创建媒体查询的效果.我将其与单个媒体查询一起使用，但是事前编写方式(写出具有不同名称的函数)的方式无法很好地扩展.我尝试了此操作，但无法正常工作-我缺少什么?

I'm trying to use the matchMedia() JavaScript web API to create the effect of media queries on an SVG. I got it to work with a single media query, but the way it was written prior (writing out functions with different names) didn't scale well. I tried this, but I'm unable to get it to work - what am I missing?

// media query event handler
if (matchMedia) {

    var bg1 = document.getElementById("bg1-mbl");
    console.log(bg1) // returns expected SVG

    var mqls = [ // list of window.matchMedia() queries
        window.matchMedia("(min-width: 400px) and (max-width: 600px)"),
        window.matchMedia("(min-width: 600px) and (max-width: 800px)"),
        window.matchMedia("(min-windth: 800px) and (max-width: 1000px)")
    ]

    for (var i=0; i < mqls.length; i++){ // loop through queries
        mqls[i].addListener(widthChange) // call handler function whenever the media query is triggered
        widthChange(mqls[i]) // call handler function explicitly at run time
    }

    // media query change
    function widthChange(mql) {
        if (mqls[0].matches) {
            console.log(mqls[0]) // returns expected
            console.log("This is bg1: " + bg1) // returns "This is bg1: [object SVGSVGElement]""
            bg1.setAttribute("viewBox", "0 150 375 580");
        }
        if (mqls[1].matches) {
            console.log(mqls[1])
            bg1.setAttribute("viewBox", "0 400 375 580");
        }
        if (mqls[2].matches) {
            console.log(mqls[3])
            bg1.setAttribute("viewBox", "0 800 375 580");
        }
        else {
            // set to default viewBox values
            bg1.setAttribute("viewBox", "0 0 375 580");
        }
    }

}

推荐答案

想通了！需要将if更改为else if.完整解决方案:

Figured it out! Need to change if to else if. Full solution:

// RESPONSIVE SVG

/* ==================================================== */
/* BG1 */
var bg1 = document.getElementById('bg1-mbl'); // grab svg element

// media query event handler
if (matchMedia) {
    var mqls = [ // array of media queries
        window.matchMedia("(min-width: 400px) and (max-width: 600px)"),
        window.matchMedia("(min-width: 600px) and (max-width: 800px)"),
        window.matchMedia("(min-width: 800px) and (max-width: 1000px)")
    ]

    for (i=0; i < mqls.length; i++) { // loop though media queries
        mqls[i].addListener(WidthChange); // listen for queries
        WidthChange(mqls[i]); // call handler func at runtime
    }
}

// media query change
function WidthChange(mql) {

    /* For testing - xml elment to string
    var XMLS = new XMLSerializer(); 
    var bg1XML = XMLS.serializeToString(bg1);
    */

    if (mqls[0].matches) { 
        bg1.setAttribute("viewBox", "0 150 375 580");
    }
    else if (mqls[1].matches) {
        bg1.setAttribute("viewBox", "0 300 375 580");
    }
    else if (mqls[2].matches) {
        bg1.setAttribute("viewBox", "0 400 375 580");
    }
    else {
        // set default
        bg1.setAttribute("viewBox", "0 0 375 580");
    }
}

这篇关于结合使用多个matchMedia()和SVG来调整ViewBox的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！